防止jquery选项卡插件中的事件重新初始化(ajax模式)

Question

我希望你能帮我解决一个问题；首先，请不要担心我的语言能力，我来自德国，不幸的是，我不是每天都说英语：

我在ajax模式下使用jquery标签，有一些关于点击事件的问题。举个例子:我在我的第一个和第二个标签中初始化了这样一个按钮的点击函数：

$(".new_message").live("click", function() { alert("test"); });

现在想象一下:用户单击第一个选项卡，标记为"new_message“类的按钮持有定义的单击函数。到目前为止，一切都很好，但在选择第二个选项卡时，有一个问题: javascript警告两次"test"，但我只想得到一次。我搜索了很多次来解决这个问题，我得到的所有解决方案都是使用live函数，但我这样做了，它不起作用。

有没有可能做到这一点，即使在ajax选项卡中也是如此？请注意，选项卡的javascript内容只有在被选中后才会加载。我没有缓存我的标签，所以标签的内容一次又一次地触发(所以如果你点击标签1，然后点击标签2，再点击标签1，脚本会警告三次“test”)……

我希望你得到它，无论什么;o)干杯，竹子

Answer 1

您可以简单地检查事件是否已经绑定，因为它是活动绑定：

var bound = false; // this should exist on the containing page and not in each tab

然后像这样把它连接起来：

$(function(){
    if (!bound)
    {
        $(".new_message").live("click", function() { alert("test"); });
        bound = true;
    }
});

我在使用向导类型的ajax接口时遇到了一个问题，在该接口中，当您在向导中来回导航时，live() jQuery事件将被绑定、绑定，然后重新绑定。为了确保正确设置任何实时事件，您需要首先调用die()方法，然后重新绑定。

$("#myClickableThing").die("click").live("click", function () {
    // do work
});

要将其添加为新的jQuery函数，您可以尝试执行以下操作：

jQuery.fn.resurrect = function (eventType, callback) {
    $(this).die(eventType).live(eventType, callback);
};

现在您可以像这样调用resurrect：

$("#myClickableThing").resurrect("click", function() { 
    // do work
});

我就这个问题编写了a blog post，并创建了一个小帮助器函数来处理它。

Answer 2

在包含选项卡的元素上使用事件委托。

示例：

$('#tabs-container')
  .bind(
    'click',
    function(e){
      if($(e.target).is('.new_message')){
        alert('test');
      }
    }
  );