Question

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

$.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，它会将点击处理程序绑定到任何新创建的元素。

jQuery：有一种更有效的方法，不是吗？

2 个答案: