asp.net mvc - jQuery Click Event Not Firing on Click -
i'm creating new view in mvc4 , ran issue. test out, made view master layout , 1 button. whenever click button, event handler doesn't fire. if manually call click in firebug via $("#btnsearch").click() works. have many many other pages written same master layout no issue. have no idea causing this, exists in ff , ie (i don't have chrome @ work) , no js errors thrown. feel i'm going nuts here , appreciate taking look.
this view:
@{ viewbag.title = "sp"; } <input type="button" id="btnsearch" class="btn btn-info" value="search"> @section scripts { <script type="text/javascript"> $(document).ready(function () { alert($("#btnsearch").length); $("#btnsearch").click(function () { alert("click"); }); }); </script> } entire rendered page (sorry!)
<!doctype html> <html lang="en"> <head> <body> <div id="wrap"> <div class="notifications top-center"> </div> <div class="navbar"> <div class="navbar-inner"> <a class="brand" style="padding-bottom: 0px; padding-top: 0px; margin-top: 5px;" href="/home"> <img style="max-height: 40px;" alt="logo" src="http://1d105060b76888f49cca-18b13877112b07adace1c9fe66f01975.r97.cf1.rackcdn.com/logo_revisedsmall.png"> </a> <ul class="nav"> <li> <a href="/account/myaccount">my account</a> </li> <li id="carnav"> <a href="/wine/create">add wine</a> </li> <li> <a href="/home/news">news</a> </li> <li> <a href="/account/logoff">log off</a> </li> <li> <a href="/account/admin">admin</a> </li> </ul> <div class="navbar-form form-search pull-right"> <span class="loader" style="margin-bottom: -7px;"></span> <div class="input-append" style="position: relative"> <input id="txtsearch" class="search-query" type="text" placeholder="search wines"> <i class="icon-info-sign search-help" style="position: absolute; right: 75px; top: 6px; z-index: 5;" data-target="#searchmodal" data-toggle="modal"></i> <a id="btnsearch" class="btn" onclick="winesearch(); return false;" type="button" href="#">search</a> </div> </div> </div> <div id="searchmodal" class="modal hide fade"> <div class="modal-header"> <button class="close" aria-hidden="true" data-dismiss="modal" type="button"> ×</button> <h3> searching</h3> </div> <div class="modal-body"> <p> part, searching normal - in favorite web search</p> <br> <h4> keep in mind these handy tips</h4> <ul> <li>searches limited 1000 records</li> <li>use quotes put words together, ex) "dom perignon"</li> <li>use dash ("-") search part of word, ex) "dom peri-"</li> </ul> </div> <div class="modal-footer"> <a class="btn" data-dismiss="modal" href="#">close</a> </div> </div> </div> <input id="btnsearch" class="btn btn-info" type="button" value="search"> <div id="push"> </div> </div> <div id="footer"> <div class="container"> copyright © 2013 vinformative, inc. rights reserved. - <a title="home" href="http://www.vinformative.com">home</a> | <a href="/home/tou">terms of use</a> | <a href="/home/privacy"> privacy policy</a> | <a title="contact" href="mailto:info@vinformative.com">contact</a> </div> </div> <div class="feedback_float" data-target="#modalfeedback" data-toggle="modal"> <div class="olup"> feedback</div> <div class="trans"> </div> </div> <div id="modalfeedback" class="modal hide fade" aria-hidden="true" aria-labelledby="modalfeedbacklabel" role="dialog" tabindex="-1"> <div class="modal-header"> <button class="close" aria-hidden="true" data-dismiss="modal" type="button"> ×</button> <h3 id="modalfeedbacklabel"> give feedback</h3> </div> <form id="formfeedback" method="post" enctype="multipart/form-data" action="/home/jsonfeedback" novalidate="novalidate"> <input type="hidden" value="pqmcvan7yoifnm1pfkqrxodn8drbiffwftkukm-yz8ixnjg88vdeo8sxz0ktapu_2bgjqaxeepeoptssswskit-_6jop8wxh6_lsljsfvgdmy-u0fg_49cez3jn7sbkc-7fwu9ji-ytenlbhcu_rkg57xiujct_7ikprfvmc0_qthwarcxsbhcpyof2stq5n0" name="__requestverificationtoken"> <div class="modal-body"> <p> use form below provide , feedback on our site. </p> <p> wines you'd see new functionality, want hear you!</p> <hr> <label> feedback type (pick one)</label> <select id="ddlfeedbacktype" name="ddlfeedbacktype"> <option value="">please select...</option> <option value="1">request wine addition</option> <option value="2">edit incorrect information</option> <option value="3">report improper use</option> <option value="4">general inquiry</option> <option value="5">site error(s)</option> </select> <label> enter email</label> <input id="txtfeedbackemail" class="input-large" type="text" value="bharnett@globallink.com" name="txtfeedbackemail"> <p> please give details, we'll can.</p> <textarea id="txtfeedbacktext" class="input-xlarge" cols="50" rows="6" name="txtfeedbacktext"></textarea> </div> <div class="modal-footer"> <span class="loader"></span> <button class="btn" aria-hidden="true" data-dismiss="modal"> close</button> <button class="btn btn-primary"> submit</button> </div> <div class="alert alert-error hide"> <button class="close" data-dismiss="alert" type="button"> ×</button> <strong>error</strong> <span class="alert-msg">.</span> </div> <div class="alert alert-success hide"> <button class="close" data-dismiss="alert" type="button"> ×</button> <strong>success</strong> <span class="alert-msg"></span> </div> </form> </div> <div id="search_tab"> <img src="../../content/images/advancedsearch.png" alt="layers"> </div> <div id="search_inner" class="slideoutbox"> <h2> advanced search</h2> <div class="winepicker_box"> <table class="pickertable" cellspacing="0" cellpadding="3" border="0"> </div> </div> <script src="/scripts/libraries/jquery-1.7.1.js"> <script src="/scripts/libraries/jquery-ui-1.8.20.js"> <script src="/scripts/plugins/jquery.loaderbutton.js"> <script src="/scripts/plugins/jquery.form.js"> <script src="/scripts/bootstrap/bootstrap.js"> <script src="/scripts/bootstrap/bootbox.js"> <script src="/scripts/bootstrap/bootstrap-notify.js"> <script src="/scripts/feedback.js"> <script src="/scripts/global.js"> <script src="/scripts/winesearch.js"> <script src="/scripts/libraries/jquery.validate.js"> <script type="text/javascript"> $(document).ready(function () { alert($("#btnsearch").length); $("#btnsearch").click(function () { alert("click"); }); }); </script> <ul class="ui-autocomplete ui-menu ui-widget ui-widget-content ui-corner-all" role="listbox" aria-activedescendant="ui-active-menuitem" style="z-index: 2; top: 0px; left: 0px; display: none;"></ul> </body> </html>
i see couple issues:
you have 2 elements id of btnsearch:
<a id="btnsearch" class="btn" onclick="winesearch(); return false;" type="button" href="#">search</a>
<input id="btnsearch" class="btn btn-info" type="button" value="search">
your scripts don't have closing tags:
<script src="/scripts/libraries/jquery-1.7.1.js"> <script src="/scripts/libraries/jquery-ui-1.8.20.js"> <script src="/scripts/plugins/jquery.loaderbutton.js"> <script src="/scripts/plugins/jquery.form.js"> <script src="/scripts/bootstrap/bootstrap.js"> <script src="/scripts/bootstrap/bootbox.js"> <script src="/scripts/bootstrap/bootstrap-notify.js"> <script src="/scripts/feedback.js"> <script src="/scripts/global.js"> <script src="/scripts/winesearch.js"> <script src="/scripts/libraries/jquery.validate.js"> 
Comments
Post a Comment