点击事件jQuery点击事件不点火

时间：2013-07-17 18:41:26

标签： jquery asp.net-mvc asp.net-mvc-4

我正在MVC4中创建一个新视图并遇到了这个问题。为了测试它，我做了一个视图，但主要布局和一个按钮。每当我单击此按钮时，事件处理程序都不会触发。如果我通过$（“＃btnSearch”）在Firebug中手动调用点击。单击（）它可以工作。我有很多其他页面使用相同的主布局编写，没有任何问题。我不知道是什么导致这种情况，它存在于FF和IE中（我的工作中没有Chrome）并且没有抛出JS错误。我觉得我在这里疯了，我真的很感激有人看看。

这是观点：

@{
    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>
}

整个渲染页面（抱歉！）

<!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: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 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="bharnett@globallink.com" 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>

2 个答案:

答案 0 :(得分：1)

我看到了几个问题：

您有两个ID为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">

您的脚本也没有结束标记：

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

答案 1 :(得分：0)

尝试：

 $(document).ready(function () {

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

    });
相关问题
最新问题