javascript - Why doesn't image button call jquery function? -
i using jquery function display alert box when click on imagebutton inside asp.net repeater.
<script type="text/javascript"> $('input[id$="imgbuttonstory"]').click(function () { alert("hi, it's 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: want way only, not 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 photo story"); } ); </script> </body> </html> i have uploaded whole page reference. please check out. it's annoying have in code. mean error. has wasted lot of time of mine.
the id of element imagebutton when rendered dynamic id because id attribute must unique , inside repeater not granted, never "imgbuttonstory". think shall call javascript function using onclientclick of imagebutton (but don't remember if has onclientclick) or, select buttons class selector instead of id selector in jquery function
Comments
Post a Comment