jQuery：有一个更有效的方法来做到这一点，不是吗？

Question

我有一个插件，实质上是对服务器端的表进行排序，并将内容放回到容器中。我有一个绑定函数，它将一个单击事件添加到表格单元格中，以调用父表单提交。我觉得这不是解决这个问题的最好方法。有任何想法吗？

$.fn.myplugin = function() { 
    return this.each(function() { 
    var parentform = $(this).parents("form"); 
    var tableidentifier = $(this).attr("id"); 

    var bindclicks = function() { 
     parentform.find("table#" + tableidentifier + " thead tr th").click(function() { 
     // Some code to change the sort column- boring! 
     parentform.submit(); 
     }); 
    } 

    bindclicks(); 

    parentform.submit(function() { 
     $.post(parentform.attr("action"), parentform.serialize(), function(res) { 
     parentform.find("table#" + tableidentifier).replaceWith($(res)); 
     bindclicks(); 
     }) 
     return false; 
    }); 
    }); 
} 

我首先调用bindclicks()函数来设置单击处理了，然后因为我做replaceWith()我再次调用它来重新绑定的事件。它的工作原理，但我很好奇..

Answer 1

您可以使用.delegate()，因此您无需每次重新绑定您的点击处理程序。

$.fn.myplugin = function() { 
    return this.each(function() { 
     var parentform = $(this).parents("form"); 
     var tableidentifier = $(this).attr("id"); 

     parentform.delegate("table#" + tableidentifier + " thead tr th", "click", function() { 
      parentform.submit(); 
     }); 

     parentform.submit(function() { 
      $.post(parentform.attr("action"), parentform.serialize(), function(res) { 
       parentform.find("table#" + tableidentifier).replaceWith($(res)); 
      }) 
      return false; 
     }); 
    }); 
} 

只用剪断，它表示，这应该工作，因为要更换<table/>和委派的事件被绑定到<form/>

Answer 2

的这个代替：

var bindclicks = function() { 
     parentform.find("table#" + tableidentifier + " thead tr th").click(function() { 
      parentform.submit(); 
     }); 
    } 

    bindclicks(); 

试试这个：

$("table#" + tableidentifier + " thead tr th", parentForm) 
    .bind('click', function() { 
     parentForm.submit(); 
    }); 

如果使用live而不是bind，它会绑定单击处理到任何新创建的元素。