代码之家 › 专栏 › 技术社区 › user8313534

为什么image按钮不调用jquery函数?

imagebutton repeater asp.net jquery javascript

-1

user8313534 · 技术社区 · 8 年前

当我点击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>

2 回复 | 直到 8 年前

1

3

Sycraw 8 年前

渲染时元素ImageButton的Id是一个动态Id,因为Id属性必须是唯一的,并且在转发器内无法授予该属性,因此它永远不会是“imgButtonStory”。我认为应该使用ImageButton的OnClientClick调用javascript函数(但我不记得它是否有OnClientClick),或者在jQuery函数中使用类选择器而不是Id选择器来选择按钮

2

1

Ankit 8 年前

asp的客户端id。net服务器控件不同于服务器端id。

您可以使用 ClientIDMode = "Static" 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");
      });