jQuery Click Event Not Firing on Click

Question

I'm creating a new view in MVC4 and ran into this issue. To test it out, I made a view with something but the master layout and one button. Whenever I click this button, the event handler doesn't fire. If I manually call the click even in Firebug via $("#btnSearch").click() it works. I have many many other pages written with the same master layout with no issue. I have no idea what is causing this, it exists in FF and IE (I don't have Chrome at my work) and no JS errors are thrown. I feel like I'm going nuts here and I really appreciate anyone taking a look.

This is the 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 a 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> For the most part, searching is normal - like in your favorite web search</p>
<br>
<h4> Just keep in mind these handy tips</h4>
<ul>
<li>Searches are limited to 1000 records</li>
<li>Use quotes to put words together, ex) "Dom Perignon"</li>
<li>Use a dash ("-") to search for part of a 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. All 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:[email protected]">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 us your 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 the form below to provide any and all feedback on our site. </p>
<p> From wines you'd like to see to new functionality, we want to hear from 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 your email</label>
<input id="txtFeedbackEmail" class="input-large" type="text" value="[email protected]" name="txtFeedbackEmail">
<p> Please give us some details, we'll get back to you as soon as we 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>

Jason P · Accepted Answer · 2013-07-17 18:47:36Z

1

I see a couple issues:

You have two elements with the 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 also 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">

answered Jul 17, 2013 at 18:47

Jason P

27k3 gold badges34 silver badges45 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Zaheer Ahmed · Accepted Answer · 2013-07-17 18:53:04Z

0

try:

 $(document).ready(function () {

        $("input#btnSearch").click(function () {
            alert("Click");
        });

    });

answered Jul 17, 2013 at 18:53

Zaheer Ahmed

28.7k12 gold badges77 silver badges113 bronze badges

Collectives™ on Stack Overflow

jQuery Click Event Not Firing on Click

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related