Question

在模式框或灯箱内加载内容时，最好是通过使用jQuery.on()来连接所需的事件和脚本，还是通过脚本标记加载内容？

例如，使用.on()解决方案：

$('#blah').on('load', function() {
    $('#something').click(function() { alert('Hi'); });
});

然后当加载模态框时，它会调用$('#blah').trigger('load')

或者，只需简单地将脚本加载到HTML中，如下所示：

<div id="blah">
    <a href="#" id="something">Something</a>
</div>
<script src="/js/blah.js"></script>

包含上面的javascript代码的blah.js涉及在#something上设置click事件。我已经使用了.on()方法一段时间，但我不确定这是否是处理此问题的最佳方式。

Answer 1

脚本包含解决方案的参数

on解决方案很丑陋而且参与其中。它需要比简单脚本包含更多的代码，并且混淆了加载处理代码（可能是其他地方）和灯箱内容之间的关注点。为什么该代码应该知道灯箱内元素的ID？

on解决方案的论据

它只涉及一个HTTP请求，因此可能会更快。

Answer 2

设计.on()的方式，您将首先设置事件处理程序，如下所示：

$("#blah").on('click', "#something", function() { alert('Hi'); });

然后，当您在#blah中加载内容时，您的事件处理程序将自动适用于#something元素，并且您不需要.load()处理程序。

这种方式的工作方式是jQuery在#blah上设置一个事件处理程序。该事件处理程序检查任何冒泡到它的点击事件，当它看到一个目标位于与选择器#something匹配的对象上时，它会触发该事件。 #something可以随意进出，因为实际的事件处理程序在整个时间内存在的父对象上。

使用此方法，您不需要额外的blah.js文件。