3

我们可以on为静态创建的 DOM 元素使用 jQuery 而不是 jQuery click （我知道这会起作用，但我想知道它好用吗？）

这有什么不同

$('body').on('click', '#joinSession', function(){}) 和$('#joinSession').on('click', function() {})

我已经创建了jsfiddle两种方法都给出了相同的结果，这之间有什么显着不同？

HTML

<div class="container">
    <div class="controls">
        <input type="button" value="Create session" id="createSession"/>
        <input type="button" value="Join session" id="joinSession"/>
    </div>
    <div class="othersVideos"></div>
    <div class="ownVideo"></div>
</div>

jQuery脚本

$('#createSession').on('click', function() {
    alert('test');
});

$('body').on('click', '#joinSession', function() {
    alert('testing')
});
4

5 回答 5

4 
$('#createSession').on('click', function() {
    alert('test');
});

这会将点击处理程序直接绑定到与选择器匹配的任何元素。如果在绑定调用时没有找到任何元素，它将什么也不做。

$('body').on('click', '#joinSession', function() {
    alert('testing')
});

这使用事件委托并将点击处理程序绑定到body. 每当一个事件冒泡到body，jQuery 将检查事件的来源。如果它来自与第二个参数选择器匹配的东西，它将触发处理程序。这使事件能够绑定到可能尚不存在的元素 - 只要它们在事件触发时存在，处理程序仍将应用于它们。

几乎总是应该使用第二种语法，因为它具有性能和内存优势。为获得最佳结果，您应该使用尽可能快 (id) 并尽可能靠近元素的选择器，而不是body. 有关事件委托的更多信息，请查看jqFundamentals。

于 2013-06-26T13:33:18.133 回答
3

第一个模型将事件直接绑定到元素，这种方法的缺点是执行脚本时源元素必须存在。

第二个模型将处理程序绑定到文档正文，如果选择器条件对于事件源元素的任何祖先/自身为真，它会使用事件传播来触发处理程序。这在处理动态元素时很有用，因为在执行事件注册代码时，目标元素可能不存在于文档中

于 2013-06-26T13:32:33.280 回答
3

第一个例子：

$('#createSession').on('click', function() {
    alert('test');
});

正在通过 id 查找特定元素。如果页面上不存在该元素，则不会将点击事件添加到此。

第二个例子：

$('body').on('click', '#joinSession', function() {
    alert('testing');
});

将 click 事件绑定到 body，因此即使在绑定 click 事件#joinSession时不存在，您也可以稍后将此元素附加到 body，并且 click 事件将起作用，而无需再次绑定事件。当您有一个动态 UI 并且您知道稍后会添加某些元素，但您只想绑定一次事件而不担心每次将新元素添加到文档时都重新绑定时，这很有用。

于 2013-06-26T13:33:14.037 回答
2 
$('#myDiv .div').on('click', function() {
    alert('test');
});

假设您的 div 中有几个.divs #myDiv，上面的代码将为每个匹配的元素附加一个事件。假设你有 1,000 个 div？它将事件附加到 1,000 个不同的元素。

$('#myDiv').on('click', '.div', function() {
    alert('testing')
});

以上，只会将元素附加到，并且会在事件发生在 上#myDiv时触发，但前提是它也在匹配元素上。这样，对于 1,000 个 div 内部，您只有一个事件处理程序，从而避免了开销和性能问题。此外，后者将处理动态生成的元素，这些元素是通过 AJAX 或通过 jQuery 本身作为动态元素创建的。click#myDiv.div#myDiv

于 2013-06-26T13:34:07.460 回答
0

您$(element).on('event',element, function(){...}用于新创建的元素，以便它们保留功能。

在此处检查此示例

于 2013-06-26T13:33:33.430 回答