Why doesn't image button call jquery function?

Question

I am using a jquery function to display an alert box when I click on ImageButton inside the asp.net repeater.

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

Repeater:

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

Note: I want to do it this way only, not the other way.

Update:

My whole page:

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

I have uploaded my whole page for your reference. Please check it out. It's really annoying to have it in code. I mean the error. It has wasted a lot of time of mine.

Two reasons. Firstly the element id will be changed by ASP.Net so that it's not `imgButtonStory` at runtime - it may not even end with that as you've used. Also, your code is not in a document.ready event handler. So unless you're running it just before `
` the DOM won't have loaded in time — Rory McCrossan, Sep 11 '17 at 09:38
'.ClientID' will help you https://msdn.microsoft.com/en-us/library/system.web.ui.control.clientid(v=vs.110).aspx and https://stackoverflow.com/questions/28270970/how-to-get-aspbutton-id-in-jquery — Vedant Terkar, Sep 11 '17 at 09:39

score 3 · Accepted Answer · answered Sep 11 '17 at 09:40

3

The Id of the element ImageButton when rendered is a Dynamic Id because the Id attribute must be unique and inside a repeater this could not be granted, so it will never be "imgButtonStory". I think that you shall call the javascript function using OnClientClick of ImageButton (but I don't remember if it has OnClientClick) or, select the buttons with a class selector instead of an Id selector in jQuery function

answered Sep 11 '17 at 09:40

Sycraw

543
3
17

@Stacky your jQuery selection is not what you need: what you wrote to jQuery means "search all elements". Try to add a custom class to your image button (I.E. myButton class) and change the script in this way: $(".myButton").click( ( function () { alert("Hi, it's a photo story"); } ); jQuery will select all buttons with myButton class and will bind the click event on them with the function containing the alert – Sycraw Sep 11 '17 at 14:52

Ankit · Answer 2 · 2017-09-11T11:03:54.603

1

Client side id of asp.net server controls is different from server side id.

You may use ClientIDMode = "Static" (introduced in .NET 4.0) or you might use ClientID as shown below

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

Also make sure to place your script tag just above closing body tag </body> like this :

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

EDIT

Ok , here's what i think you can do , have a class included in your imageButton

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

Notice class customClass

Now call your code as follows (don't use $("imgButtonStory")) :

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

edited Sep 11 '17 at 11:03

answered Sep 11 '17 at 09:44

Ankit

5,733
2
22
23

I discourage to use ClientIDMode Static inside a repeater: this could generate a series of elements with same Id and that's awful for an HTML document. – Sycraw Sep 11 '17 at 09:46
Why do people suggest placing the `script` tags at the bottom of the `body` rather than recommending them to use a DOM ready function? – NewToJS Sep 11 '17 at 09:47
@NewToJS that's a valid suggestion. – Ankit Sep 11 '17 at 09:47
@Sycraw agree ! just that it's an option mentioned for the sake of completeness – Ankit Sep 11 '17 at 09:48
@Winnie I'm just curious to know if it's for a specific reason for avoiding the DOM ready function. I have seen this done on many answers but could never understand why. – NewToJS Sep 11 '17 at 09:50
it is because browser parses the HTML sequentially , it the script tag is located just before closing body tag , entire body is been parsed and DOM is created (please note that external resources such as images might haven't loaded till now). If script tag executes now DOM elements will be found – Ankit Sep 11 '17 at 09:51
I know that would cause a syntax error but what I'm saying is, I'm curious to why people suggest placing `script` at the end of the `body` rather than using a DOM ready function.... is there a specific reason for this? "For recommending relocating the `script` rather than using DOM ready" – NewToJS Sep 11 '17 at 09:55
In order to get the best perceived load time, what happens with document.ready approach is (when your code is in head rather than at the end of body or some external file) it fetches the file and then waits till DOM is ready i.e. some extra processing is involved which takes time. On the other hand placing the script tag at bottom is effortless and is natural sequence of events – Ankit Sep 11 '17 at 09:59
@Winnie I tried both approaches but none of them is working – Sep 11 '17 at 10:17

Why doesn't image button call jquery function?

2 Answers2