为什么图像按钮不调用 jquery 功能？

Question

我正在使用 jquery 函数在单击 asp.net 中继器内的 ImageButton 时显示警告框。

<script type="text/javascript">
  $('input[id$="imgButtonStory"]').click(function () {
    alert("Hi, it's a photo story");
  });
</script>

中继器：

<asp:Repeater ID="rptrImages" runat="server">
  <ItemTemplate>
    <div class="col-md-4">
      <div class="thumbnail">
        <asp:ImageButton ID="imgButtonStory" runat="server" ImageUrl='<%# "UploadedImages/"+ Eval("Image") %>' CssClass="img-responsive img-rounded" />
      </div>
  </div>
</ItemTemplate>

注意：我只想这样做，而不是其他方式。

更新：

我的整个页面：

<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="frmMain.aspx.cs" Inherits="HimHer.frmMain" %>

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <title></title>
    <link href="css/bootstrap.min.css" rel="stylesheet" />
  <%--  <link href="css/custom.css" rel="stylesheet" />--%>
     <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
        <script src="js/bootstrap.min.js"></script>




</head>
<body>
    <form id="form1" runat="server">
        <nav class="navbar navbar-default">
            <div class="container-fluid">
                <div class="navbar-header">
                    <button type="button" id="btncollapse" class="navbar-toggle" data-toggle="collapse" data-target="#navbarcollapse">
                        <span class="icon-bar"></span>
                        <span class="icon-bar"></span>
                        <span class="icon-bar"></span>
                    </button>
                    <a class="navbar-brand" target="_self" href="learning.html">HerHim</a>
                </div>
                <div id="navbarcollapse" class="collapse navbar-collapse">
                    <ul class="nav navbar-nav">
                        <li class="Active"><a href="learning.html">Home</a></li>
                        <li class="dropdown">
                            <a class="dropdown-toggle" data-toggle="dropdown" href="#">About<span class="caret"></span></a>
                            <ul class="dropdown-menu">
                                <li><a href="me.html" target="_blank">Me</a></li>
                                <li><a href="her.html" target="_blank">Her</a></li>
                                <li></li>
                            </ul>
                        </li>
                        <li><a href="#">Our Story</a></li>
                    </ul>
                </div>
            </div>
        </nav>
        <div class="container-fluid">
            <asp:Repeater ID="rptrImages" runat="server">
                <ItemTemplate>

                        <div class="col-md-4">
                            <div class="thumbnail">
                               <asp:ImageButton ID="imgButtonStory" ClientIDMode="Static" runat="server" ImageUrl='<%# "UploadedImages/"+ Eval("Image") %>' CssClass="img-responsive img-rounded" />
                            </div>

                    </div>
                </ItemTemplate>
            </asp:Repeater>
            <%--          <div class="row">
              <div class="col-md-4">
                  <div class="thumbnail">
                      <img src="Images/1.jpg" alt="No Image" class="img-responsive img-rounded"/>
                  </div>
              </div>          
             <div class="col-md-4">
                  <div class="thumbnail">
                      <img src="Images/2.jpg" alt="No Image" class="img-responsive img-rounded" />
                  </div>                                                                       
              </div>                                                                           
              <div class="col-md-4">                                                           
                  <div class="thumbnail">                                                      
                      <img src="Images/3.jpg" alt="No Image" class="img-responsive img-rounded" />
                  </div>
              </div>
              </div>
          <div class="row">
              <div class="col-md-4">
                  <div class="thumbnail">
                      <a href="#"><img src="Images/1.jpg" alt="No Image" class="img-responsive img-rounded" /></a>

                  </div>
              </div>              

              <div class="col-md-4">
                  <div class="thumbnail">
                      <a href="#"><img src="Images/5.jpg" alt="No Image" class="img-responsive img-rounded"/></a>
                  </div>
              </div>

              <div class="col-md-4">
                  <div class="thumbnail">
                      <a href="#"><img src="Images/1.jpg" alt="No Image" class="img-responsive img-rounded"/></a>
                  </div>
              </div>
              </div>
          <div class="row">
              <div class="col-md-4">
                  <div class="thumbnail">
                      <a href="#"><img src="Images/2.jpg" alt="No Image" class="img-responsive img-rounded"/></a>
                  </div>
              </div>

              <div class="col-md-4">
                  <div class="thumbnail">
                       <a href="#"><img src="Images/1.jpg" alt="No Image" class="img-responsive img-rounded"/></a>
                  </div>
              </div>

              <div class="col-md-4">
                  <div class="thumbnail">
                      <a href="#"><img src="Images/10.jpg" alt="No Image" class="img-responsive img-rounded"/></a>
                  </div>
              </div>
          </div>
          <div class="row">
              <div class="col-md-4">
                  <div class="thumbnail">
                      <a href="#"><img src="Images/3.jpg" alt="No Image" class="img-responsive img-rounded"/></a>
                  </div>
              </div>

              <div class="col-md-4">
                  <div class="thumbnail">
                       <a href="#"><img src="Images/10.jpg" alt="No Image" class="img-responsive img-rounded"/></a>
                  </div>
              </div>

              <div class="col-md-4">
                  <div class="thumbnail">
                      <a href="#"><img src="Images/1.jpg" alt="No Image" class="img-responsive img-rounded"/></a>
                  </div>
              </div>
          </div>--%>
        </div>
        <footer class="footer">
            <div class="container-fluid">
                <div class="row">
                    <div class="col-lg-12">
                        <a class="footer" href="#" target="_blank">Facebook</a>
                        <a class="footer" href="#" target="_blank">Quora</a>
                        <a class="footer" href="#" target="_blank">Twitter</a>
                    </div>

                </div>
            </div>
        </footer>



    </form>

    <script type="text/javascript">



                   $("imgButtonStory").click
                   (
                      function () {
                          alert("Hi, it's a photo story");
                      }
                   );



    </script>
</body>
</html>

我已经上传了整个页面供您参考。请检查一下。在代码中使用它真的很烦人。我的意思是错误。浪费了我很多时间。

Answer 1

渲染时 ImageButton 元素的 Id 是一个动态 Id，因为 Id 属性必须是唯一的，并且在转发器中不能被授予，所以它永远不会是 "imgButtonStory"。我认为您应该使用 ImageButton 的 OnClientClick 调用 javascript 函数（但我不记得它是否有 OnClientClick）或者 select 带有 class select 的按钮或者代替 Id select 或 jQuery 函数

Answer 2

asp.net 服务器控件的客户端 ID 与服务器端 ID 不同。

您可以使用 ClientIDMode = "Static"（在 .NET 4.0 中引入）或者您可以使用 ClientID，如下所示

var clientSideID= "<%= rptrImages.ClientID %>" ;
$('input[id$=' + clientSideID + ']').click(function () { 
    alert("Hi, it's a photo story");
  });

还要确保将 script 标签放在结束 body tag </body> 上方，如下所示：

<body>
..
...
...
<script>
</script>
</body>

编辑

好的，这就是我认为你可以做的，在你的 imageButton

中包含一个 class

<asp:ImageButton ID="imgButtonStory" runat="server" ImageUrl='<%# "UploadedImages/"+ Eval("Image") %>' CssClass="img-responsive img-rounded customClass" />

通知classcustomClass

现在调用你的代码如下（不要使用$("imgButtonStory")）：

$(".customClass").click(function () {
        alert("Hi, it's a photo story");
      });

为什么图像按钮不调用 jquery 功能？

Why doesn't image button call jquery function?

javascript

asp.net

jquery

repeater

imagebutton