.on('click')和.click()的区别

下面的代码有区别吗?

$('#whatever').on('click', function() {
     /* your code here */
});

and

$('#whatever').click(function() {
     /* your code here */
});

当前回答

.on()是jQuery 1.7版本中所有事件绑定的推荐方式。它将.bind()和.live()的所有功能滚动到一个函数中，当您传递不同的参数时，该函数会改变行为。

正如您所写的示例，两者之间没有区别。两者都将一个处理程序绑定到#whatever的单击事件。On()提供了额外的灵活性，允许您将#whatever的子对象触发的事件委托给单个处理程序函数(如果您愿意的话)。

// Bind to all links inside #whatever, even new ones created later.
$('#whatever').on('click', 'a', function() { ... });

2012-02-03 00:30:50

其他回答

不，没有。 on()的重点是它的其他重载，以及处理没有快捷方法的事件的能力。

2012-02-03 00:28:43

新元素

如果你想点击附加到新元素，作为上述综合答案的补充，以突出关键点:

第一个选择器所选择的元素(例如$("body"))必须在声明时存在，否则就没有可以附加的元素。必须使用.on()函数中的三个参数，包括目标元素的有效选择器作为第二个参数。

2020-03-11 04:35:12

.on()是jQuery 1.7版本中所有事件绑定的推荐方式。它将.bind()和.live()的所有功能滚动到一个函数中，当您传递不同的参数时，该函数会改变行为。

// Bind to all links inside #whatever, even new ones created later.
$('#whatever').on('click', 'a', function() { ... });

2012-02-03 00:30:50

我认为，区别在于使用模式。

我更喜欢.on而不是.click，因为前者可以使用更少的内存，并为动态添加的元素工作。

考虑下面的html:

<html>
    <button id="add">Add new</button>
    <div id="container">
        <button class="alert">alert!</button>
    </div>
</html>

我们在哪里添加新按钮

$("button#add").click(function() {
    var html = "<button class='alert'>Alert!</button>";
    $("button.alert:last").parent().append(html);
});

并想要“警报!”来显示警报。我们可以用"click"或"on"来表示。

当我们使用点击

$("button.alert").click(function() {
    alert(1);
});

使用上述方法，将为每个匹配选择器的元素创建单独的处理程序。这意味着

许多匹配的元素将创建许多相同的处理程序，从而增加内存占用动态添加的项目不会有处理程序——例如，在上面的html中，新添加的“Alert!”按钮将不起作用，除非你重新绑定处理程序。

当我们使用。on

$("div#container").on('click', 'button.alert', function() {
    alert(1);
});

使用上述方法，所有匹配选择器的元素都有一个处理程序，包括动态创建的元素。

.．.使用.on的另一个原因

正如Adrien在下面评论的那样，使用.on的另一个原因是名称空间事件。

如果你添加了一个带有。on("click"，处理程序)的处理程序，你通常会使用。off("click"，处理程序)删除它，这将删除该处理程序。显然，只有当您有对函数的引用时，这才有效，那么如果没有呢?你可以使用命名空间:

$("#element").on("click.someNamespace", function() { console.log("anonymous!"); });

通过解绑定

$("#element").off("click.someNamespace");

2012-08-09 07:52:49

$('.UPDATE').click(function(){ }); **V/S**    
$(document).on('click','.UPDATE',function(){ });

$(document).on('click','.UPDATE',function(){ });

它比$('.UPDATE').click(function(){})更有效; 它可以使用更少的内存，并为动态添加的元素工作。有时动态获取的数据与编辑和删除按钮不生成JQuery事件时，编辑或删除数据行数据的表单，该时间$(document).on('click'，'.UPDATE'，function(){});是有效的工作，就像相同的获取数据使用jquery。更新或删除时按钮不工作:

2018-07-10 11:52:30

.on('click')和.click()的区别

推荐文章

最新文章

标签