Jquery .on（'；click'；）与.click（）之间的区别_Jquery_Click

Jquery .on（'；click'；）与.click（）之间的区别

jquery

Jquery .on（'；click'；）与.click（）之间的区别,jquery,click,Jquery,Click,以下代码之间有什么区别吗 $('#whatever').on('click', function() { /* your code here */ }); 及不，没有。 on（）的要点是它的其他重载，以及处理没有快捷方式的事件的能力。.on（）是从jQuery 1.7开始执行所有事件绑定的推荐方法。它将.bind（）和.live（）的所有功能滚动到一个函数中，在传递不同参数时改变行为正如您编写的示例所示，两者之间没有区别。两者都将处理程序绑定到#which的单击事件on（）提供了

以下代码之间有什么区别吗

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

及

不，没有。

on（）

的要点是它的其他重载，以及处理没有快捷方式的事件的能力。

.on（）

是从jQuery 1.7开始执行所有事件绑定的推荐方法。它将

.bind（）

和

.live（）

的所有功能滚动到一个函数中，在传递不同参数时改变行为

正如您编写的示例所示，两者之间没有区别。两者都将处理程序绑定到

#which

的

单击事件on（）
提供了额外的灵活性，允许您将#which
的子函数触发的事件委托给单个处理程序函数（如果您选择）
// Bind to all links inside #whatever, even new ones created later.
$('#whatever').on('click', 'a', function() { ... });

以下代码之间有什么区别吗
$('#whatever').on('click', function() {
     /* your code here */
});

不，您的问题中的两个代码示例之间没有功能上的差异.click（fn）
是.on（“click”，fn）
的“快捷方式”。发件人：
有些事件有速记方法，例如可用于附加或触发事件处理程序的速记方法。有关速记方法的完整列表，请参阅
请注意，.on（）
与.click（）
的不同之处在于，它可以通过传递选择器
参数来创建，而.click（）
则不能。如果调用.on（）
时没有选择器
参数，则其行为与完全相同。单击（）。如果要委派事件，请使用.on（）
它们看起来是相同的。。。函数的文档：
此方法是.bind（'click'，handler）的快捷方式
函数的文档：
从jQuery1.7开始，.on（）方法提供了所需的所有功能
用于附加事件处理程序。有关从旧jQuery转换的帮助
事件方法，请参见.bind（）、.delegate（）和.live（）。删除事件
与.on（）绑定，请参见.off（）
如其他答案所述：
$("#whatever").click(function(){ });
// is just a shortcut for
$("#whatever").on("click", function(){ })

注意，.on（）
支持一些其他参数组合，而.click（）
不支持，允许它处理事件委派（替代.delegate（）
和.live（）
）
（显然还有其他类似的快捷方式用于“键控”、“聚焦”等。）
我发布额外答案的原因是为了说明如果调用，会发生什么。单击（）
，不带参数：
$("#whatever").click();
// is a shortcut for
$("#whatever").trigger("click");

注意，如果直接使用.trigger（）
，还可以传递额外的参数或jQuery事件对象，这是所不能做到的。单击（）
我还想提到，如果您查看jQuery源代码（在jQuery-1.7.1.js中），您将看到，.click（）
（或.keyup（）
，等等）函数实际上会调用.on（）
或.trigger（）
。显然，这意味着您可以确信它们确实具有相同的结果，但这也意味着使用.click（）
会增加一点点开销—在大多数情况下，这不需要担心，甚至不需要考虑，但理论上，在特殊情况下，这可能很重要
编辑：最后，请注意，.on（）
允许您在一行中将多个事件绑定到同一个函数，例如：
$("#whatever").on("click keypress focus", function(){});

我认为，区别在于使用模式
我更喜欢.on
而不是。单击，因为前者可以使用更少的内存，并且可以用于动态添加的元素
考虑以下html：
<html>
    <button id="add">Add new</button>
    <div id="container">
        <button class="alert">alert!</button>
    </div>
</html>

通过以上步骤，将为与选择器匹配的每个元素创建一个单独的处理程序。这意味着
许多匹配的元素将创建许多相同的处理程序，从而增加内存占用
动态添加的项目将没有处理程序-即，在上面的html中，除非重新绑定处理程序，否则新添加的“警报！”按钮将无法工作
当我们在
在上面的示例中，将为与选择器匹配的所有元素（包括动态创建的元素）提供一个处理程序

…另一个使用.on
正如Adrien在下面所评论的，在
上使用.on的另一个原因是命名空间事件
如果您添加了一个处理程序，且该处理程序的.on（“click”，handler）
通常是使用.off（“click”，handler）
删除的，这将删除该处理程序。显然，只有当您有一个对函数的引用时，这才有效，所以如果您没有呢？您可以使用名称空间：
$("#element").on("click.someNamespace", function() { console.log("anonymous!"); });

带解绑通孔
$("#element").off("click.someNamespace");

。单击
事件仅在元素渲染时有效，并且仅在DOM就绪时附加到加载的元素
.on
事件动态附加到DOM元素，当您希望将事件附加到根据ajax请求或其他方式（在DOM准备好后）呈现的DOM元素时，这会很有帮助。
据我从internet和一些朋友那里了解。动态添加元素时使用on（）。但当我在一个简单的登录页面中使用它时，单击事件应该将AJAX发送到node.js，并在返回时添加新元素，它开始调用多个AJAX调用。当我把它改为click（）时，一切正常。实际上，我以前没有遇到过这个问题。
在这里，您将获得应用单击事件的不同方法的列表。您可以相应地选择，如果您的点击不起作用，请尝试其他选择
$('.clickHere').click(function(){ 
     // this is flat click. this event will be attatched 
     //to element if element is available in 
     //dom at the time when JS loaded. 

  // do your stuff
});

$('.clickHere').on('click', function(){ 
    // same as first one

    // do your stuff
})

$(document).on('click', '.clickHere', function(){
          // this is diffrent type 
          //  of click. The click will be registered on document when JS 
          //  loaded and will delegate to the '.clickHere ' element. This is 
          //  called event delegation 
   // do your stuff
});

$('body').on('click', '.clickHere', function(){
   // This is same as 3rd 
   // point. Here we used body instead of document/

   // do your stuff
});

$('.clickHere').off().on('click', function(){ // 
    // deregister event listener if any and register the event again. This 
    // prevents the duplicate event resistration on same element. 
    // do your stuff
})

它比$（'.UPDATE'）更有效
它可以使用更少的内存，并且可以处理动态添加的元素
在编辑或删除表单中行数据的数据时，使用edit and delete按钮动态获取的数据有时不会生成JQuery事件，此时$（document）.on（'click'，'UPDATE'，function（）{}）的工作方式与获取的数据类似。更新o时按钮不工作
$("#element").on("click.someNamespace", function() { console.log("anonymous!"); });

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

$('.clickHere').click(function(){ 
     // this is flat click. this event will be attatched 
     //to element if element is available in 
     //dom at the time when JS loaded. 

  // do your stuff
});

$('.clickHere').on('click', function(){ 
    // same as first one

    // do your stuff
})

$(document).on('click', '.clickHere', function(){
          // this is diffrent type 
          //  of click. The click will be registered on document when JS 
          //  loaded and will delegate to the '.clickHere ' element. This is 
          //  called event delegation 
   // do your stuff
});

$('body').on('click', '.clickHere', function(){
   // This is same as 3rd 
   // point. Here we used body instead of document/

   // do your stuff
});

$('.clickHere').off().on('click', function(){ // 
    // deregister event listener if any and register the event again. This 
    // prevents the duplicate event resistration on same element. 
    // do your stuff
})

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

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