前端_jQuery的.bind()、.live()和.delegate()用法

　$('a').live('click', function() { blah() });  
　　$(document).delegate('a', 'click', function() { blah() }); 
　　$('a').bind('click', function() { alert("That tickles!") }); 

　$('#container').delegate('a', 'click', function() { alert("That tickles!") }); 

$("#dataTable tbody").on("click", "tr", function(event){  alert($(this).text()); });

 

function greet(event) { alert("Hello "+event.data.name); }

$("button").on("click", { name: "Karl" }, greet);

$("button").on("click", { name: "Addy" }, greet);

 

 

推荐使用 on()--(jquery1.7版本以上),其次delegate()-, bind()方法和live方法已舍弃；

最好使用$("#commentForm").on("click", ".addNew", addComment)而不是$("body").on("click", "#commentForm .addNew", addComment)。

 

 取消表单的提交动作，并且通过返回 false 的方法来防止事件冒泡： $("form").on("submit", false)

 通过使用 .preventDefault()，仅取消默认的动作。 $("form").on("submit", function(event) {  event.preventDefault(); });

通过使用 .stopPropagation()，防止提交事件的冒泡行为，但是并不禁止提交行为。 $("form").on("submit", function(event) {  event.stopPropagation(); });

// 糟糕

$first.click(function(){  $first.css('border','1px solid red');  $first.css('color','blue'); });

$first.hover(function(){  $first.css('border','1px solid red'); })

// 建议 $first.on('click',function(){  $first.css('border','1px solid red');  $first.css('color','blue'); })

$first.on('hover',function(){  $first.css('border','1px solid red'); })

 

delegate()要快过其他两种，live()要扫描整个的文档查找所有的$(‘a’)元素，把它们存成jQuery对象。尽管live函数仅需要把’a’作为串参数传递以用做之后的判断，但是$()函数并未知道被链接的方法将会是.live()。

　　而另一方面，delegate方法仅需要查找并存储$(document)元素。

　　一种寻求避开这一问题的方法是调用在$(document).ready()之外绑定的live，这样它就会立即执行。在这种方式下，其会在DOM获得填充之前运行，因此就不会查找元素或是创建jQuery;

为了把处理程序附加到可能还未存在于DOM中的DOM元素之上。

因为bind是直接把处理程序绑定到各个元素上，它不能把处理程序绑定到还未存在于页面中的元素之上。bind()方法不推荐