为什么图像按钮不调用jquery函数？答案

【问题标题】：Why doesn't image button call jquery function?为什么图像按钮不调用jquery函数？
【发布时间】：2017-09-11 09:36:35
【问题描述】：

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

<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>

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

【问题讨论】：

两个原因。首先，元素 id 将由 ASP.Net 更改，因此它在运行时不是 imgButtonStory - 它甚至可能不会像您使用的那样结束。此外，您的代码不在 document.ready 事件处理程序中。因此，除非您在 </body> 之前运行它，否则 DOM 不会及时加载
'.ClientID' 将帮助您 msdn.microsoft.com/en-us/library/… 和 stackoverflow.com/questions/28270970/…
@VedantTerkar 我试过 clientID 但没有用
我已经更新了我的问题。请检查
@RoryMcCrossan：没有错误但仍然没有弹出窗口

标签： javascript jquery asp.net repeater imagebutton

【解决方案1】：

呈现时元素 ImageButton 的 Id 是动态 Id，因为 Id 属性必须是唯一的，并且在中继器内无法授予此属性，因此它永远不会是“imgButtonStory”。我认为您应该使用 ImageButton 的 OnClientClick 调用 javascript 函数（但我不记得它是否有 OnClientClick），或者，使用类选择器而不是 jQuery 函数中的 Id 选择器选择按钮

【讨论】：

@Stacky 你的 jQuery 选择不是你需要的：你写给 jQuery 的意思是“搜索所有元素”。尝试将自定义类添加到您的图像按钮（即 myButton 类）并以这种方式更改脚本： $(".myButton").click( ( function () { alert("Hi, it's a photo story"); } ); jQuery 将选择所有带有 myButton 类的按钮，并将其上的点击事件与包含警报的函数绑定

【解决方案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中包含一个类

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

通知类customClass

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

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

【讨论】：

我不鼓励在转发器中使用 ClientIDMode Static：这可能会生成一系列具有相同 ID 的元素，这对于 HTML 文档来说太糟糕了。
为什么人们建议将script 标签放在body 的底部而不是建议他们使用DOM 就绪函数？
@NewToJS 这是一个有效的建议。
@Sycraw 同意！只是为了完整起见，这是一个选项
@Winnie 我只是想知道是否出于特定原因避免使用 DOM 就绪功能。我已经看到很多答案都这样做了，但永远不明白为什么。