zoukankan      html  css  js  c++  java
  • 前端_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()方法不推荐

  • 相关阅读:
    C/C++多文件之间的变量定义
    PKU POJ 2186 Popular Cows 强连通分量
    重载函数
    ZOJ 2763 Prison Break
    201357 训练赛总结
    hdu 4467 Graph 构造
    201356 训练赛总结
    201353 NEERC 2012, Eastern subregional contest
    2013512 CF 183 总结
    一道动态规划
  • 原文地址:https://www.cnblogs.com/logep/p/3522111.html
Copyright © 2011-2022 走看看