时间戳

首页 > 解决方案 > jQuery元素的奇怪行为绑定事件

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

问题描述

好吧，这很奇怪，我将一个change事件绑定到一个选择。下面是确切的代码，我已经排除了所有逻辑来诊断问题。

$('#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>

标签： jquery

解决方案

因为元素#js-course-applications可能是动态生成的元素。当事件被绑定时，那真的不存在。或者如果元素不是动态生成的，那么在 DOM 就绪状态之后可能没有附加事件。

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

因此，您需要在此处使用事件委托。正如您在第二种方法中所做的那样。

推荐阅读