Question

好吧，这很奇怪，我正在将change事件绑定到一个select上。以下是确切的代码，我已经提取了诊断问题的所有逻辑。

$('#js-course-applications').on('change', function(){
    alert("Wey!");    //doesn't fire
});

console.dir($('#js-course-applications')); // correctly shows control in console

$("body").on("change", "#js-course-applications", function () {
    alert("Another Wey!"); // fires correctly
});

我的问题是为什么第一个事件没有注册？绑定之前已加载DOM。我从未遇到过类似的事情，更令人困惑的是，.on()的第一种方法在开发初期就按预期工作了。

编辑：使用jQuery 2.1.3版本具有价值

<select name="CourseApplications" class="js-course-applications" id="js-course-applications" data-courses="[{&quot;GUID&quot;:&quot;db0ce555-a775-e611-943e-005056ab59d4&quot;,&quot;FirmOffer&quot;:false,&quot;ApplicationCourse&quot;:&quot;Mechanical Engineering, BEng (Hons) (Foundation)&quot;,&quot;ApplicationStatus&quot;:&quot;Conditional Insurance&quot;,&quot;CourseType&quot;:&quot;UG&quot;},{&quot;GUID&quot;:&quot;7fbd6337-766b-e511-9432-005056ab59d4&quot;,&quot;FirmOffer&quot;:false,&quot;ApplicationCourse&quot;:&quot;Electrical and Electronic Engineering, BEng (Hons)&quot;,&quot;ApplicationStatus&quot;:&quot;Conditional Firm&quot;,&quot;CourseType&quot;:&quot;UG&quot;}]">
    <option selected="" disabled="" value="">Please select...</option>
    <option value="db0ce555-a775-e611-943e-005056ab59d4">Mechanical Engineering, BEng (Hons) (Foundation)</option>
    <option value="7fbd6337-766b-e511-9432-005056ab59d4">Electrical and Electronic Engineering, BEng (Hons)</option>
    <option value="-1">Other</option>
</select>

Answer 1

因为元素#js-course-applications可能是动态生成的元素。绑定事件时确实不存在。或者，如果该元素不是动态生成的，则在DOM就绪状态之后可能未附加事件。

您正在使用的click()绑定称为“直接”绑定，它将仅在代码执行时将处理程序附加到已经存在的元素。它不会绑定到将来创建的元素。

因此，您将需要在此处使用Event Delegation。正如您在第二种方法中所做的一样。

Answer 2

导致该元素不起作用的原因是，当您尝试添加侦听器时，如果该元素尚不可用（DOM未准备好）。 jQuery提供了一种方便的方法来确保完全解析DOM，并且可以访问称为$(document).ready()的所有元素：

$(document).ready(function() {
  $('#js-course-applications').on('change', function(){
    alert("Wey!");    //doesn't fire
  });
})

事件委托之所以有用，是因为仅在事件发生时才需要访问该元素。通常用于为由Javascript动态添加到页面的元素触发的事件添加侦听器。

请注意，事件委托仅适用于冒泡的事件。（例如，blur和focus默认不会冒泡。）

您确定该id中只有一个元素吗？否则，使用id 选择它总是会找到第一个匹配项。您需要确保整个文档中的每个id值都是唯一。

奇怪的行为绑定事件到元素jQuery

2 个答案: