javascript - Jquery 复选框更改事件未触发

Question

我正在尝试解决过去一个小时的这个小问题:

<script type="text/javascript">
$(document).ready(function(){        
    $("input[name='isClubMember']:checkbox").mousedown(function() {
         if (!$(this).is(':checked')) {
            this.checked = confirm("Are you sure?");
            $(this).trigger("change");
         }
    });
 });
</script>

有趣的是，这适用于 JSFiddle ..但不适用于我的 jsp 页面。 Sample

上面的代码在这一行(在调试控制台中)给我 null 错误

 $("input[name='isClubMember']:checkbox").mousedown(function() {

JQ -版本:1.7.2 浏览器:IE8

更新: IE 控制台错误:

 'null' is null or not an object 

在上面提到的那一行

Answer 1

它看起来您的 JSP 页面包含 Prototype jQuery 之后的库。

原型(prototype)的 $()函数接受一个 id 并在找不到该元素时返回 null，这与您观察到的行为一致。

尝试在代码中的所有地方使用 jQuery 而不是 $:

jQuery("input[name='isClubMember']:checkbox").mousedown(function() {
    // ...
});

或者将您的代码放在一个闭包中，该闭包通过 $ 参数传递给 jQuery 对象:

(function($) {
    // The rest of your code...
})(jQuery);

或者利用 ready 处理程序传递相同的 $ 参数这一事实:

jQuery(document).ready(function($) {
    // The code in your 'ready' handler...
});

您可能还想在 noConflict 中运行 jQuery模式，以避免在包含顺序发生变化时覆盖 Prototype 的 $() 函数。