Question

我有以下监听复选框的jQuery代码：

$('.vimeo-pro-checkbox').change(function() {
  $('.vimeo-pro-panel').slideToggle();
});

除非我执行以下操作，否则它才有效：

// create a function
var init_vimeo_pro_checkbox = function() {
  $('.vimeo-pro-checkbox').change(function() {
    $('.personal-vimeo-pro-panel').slideToggle();
  });
}

var ready = function() {
  init_vimeo_pro_checkbox();
};

// call the function
$(ready);

所以我的问题是为什么我的第一个版本不起作用？我的意思是它在jquery功能块中：$（）。

我认为第一个版本可以正常工作，jQuery会拿起我的复选框。

Answer 1

你的第一个语句不起作用的原因是因为直到那时jQuery才被加载/解析。

当浏览器收到要解析的HTML文档时，它首先开始解析HTML Dom，然后开始加载引用的文件异步。

这使得您可能在HTML文档中的javascript中包含代码，该代码引用在尚未解析的引用文件中某处定义的函数。因此浏览器会抛出错误并告诉您函数未知。

这就是您使用$(document).ready();处理程序（或简称$();）的原因。这样可以确保在执行代码之前加载并解析所有引用的文件/脚本。

Answer 2

你需要包装第一个代码，如$(function(){...});

$(function () {
    $('.vimeo-pro-checkbox').change(function () {
        $('.vimeo-pro-panel').slideToggle();
    });
});

Answer 3

你正在动态加载这个盒子吗？

为了将任何eventhandler绑定到一个元素，它必须在该代码被命中之前存在于DOM中。

如果你不确定尝试类似

的话

$(function () {
    $('body').on('change','.vimeo-pro-checkbox',(function () {
        $(this).slideToggle();
    });
});

Answer 4

在我看来，问题是$('.vimeo-pro-checkbox')在文档准备好之前没有正确评估。元素.vimeo-pro-checkbox不存在

何时在jQuery中使用文档就绪事件

4 个答案: