下面的代码有区别吗?
$('#whatever').on('click', function() {
/* your code here */
});
and
$('#whatever').click(function() {
/* your code here */
});
下面的代码有区别吗?
$('#whatever').on('click', function() {
/* your code here */
});
and
$('#whatever').click(function() {
/* your code here */
});
当前回答
下面的代码有区别吗?
不,在你的问题中的两个代码示例之间没有功能上的区别。click(fn)是.on(“click”,fn)的“快捷方法”。来自.on()的文档:
对于一些事件(如.click()),可以使用一些简写方法来附加或触发事件处理程序。有关简写方法的完整列表,请参见事件类别。
请注意,.on()与.click()的不同之处在于,它能够通过传递选择器参数来创建委托事件处理程序,而.click()则不能。当不带选择器参数调用.on()时,它的行为与.click()完全相同。如果需要事件委托,请使用.on()。
其他回答
$('.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。更新或删除时按钮不工作:
.click事件只在元素被渲染时起作用,并且只在DOM准备好时附加到加载的元素上。
.on事件动态地附加到DOM元素,当你想要将事件附加到ajax请求或其他东西(在DOM准备好之后)上呈现的DOM元素时,这是很有用的。
他们现在已经弃用了click(),所以最好使用on('click')
下面的代码有区别吗?
不,在你的问题中的两个代码示例之间没有功能上的区别。click(fn)是.on(“click”,fn)的“快捷方法”。来自.on()的文档:
对于一些事件(如.click()),可以使用一些简写方法来附加或触发事件处理程序。有关简写方法的完整列表,请参见事件类别。
请注意,.on()与.click()的不同之处在于,它能够通过传递选择器参数来创建委托事件处理程序,而.click()则不能。当不带选择器参数调用.on()时,它的行为与.click()完全相同。如果需要事件委托,请使用.on()。
我认为,区别在于使用模式。
我更喜欢.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");