Question

我很难让一些jQuery函数像它应该的那样工作。

我的网站上有一个类似按钮，可以在添加新项目之前使用，然后停止工作。当我有以下代码时，这很有效：

$('.like').toggle(
    function() {
        console.log('href');
    }, function() {
        console.log('rel');
    }
);

我的一个朋友指示我参加活动，但我很难让它上班。

这就是我现在所拥有的。

简单的HTML

<button href='123.html' rel='456.html' class='like'>Click here</button>

jQuery，包含在$（document）.ready（... 我尝试了切换功能，似乎喜欢按钮在第一次点击时处于睡眠状态，然后突然醒来并执行事件。

$('body').click(function(event) {
    if ($(event.target).is('.like')) {
        var $like = $(event.target);
        $like.toggle(
            function() {
                console.log('href');
            }, function() {
                console.log('rel');
            }
        );
    }
});

为了在添加新项目时继续工作并确保按钮不会以这种方式行事，代码应该是什么样的

这是一个小提琴。

http://jsfiddle.net/_entreprenerd/SpmbQ/

Answer 1

您需要委托事件处理程序来解决您的问题。

$('body').on('click', '.like', function() {
  $(this).toggle(
    function() {
        console.log('href');
    }, function() {
        console.log('rel');
    });
}).click();

参见 .on()

您还有delegate()

$('body').delegate('.like', 'click', function() {
  $(this).toggle(
    function() {
        console.log('href');
    }, function() {
        console.log('rel');
    });
}).click();

注意您可以使用包含.like的容器代替正文。

Answer 2

您可能正在寻找.on()（或.delegate()的jQuery版本＆lt; 1.7）

Answer 3

通过codeparadox解决方案或在ajax调用在DOM中添加了新元素之后挂钩事件。但是codeparadox的解决方案更好。

Answer 4

问题是，我们不能委托“toggle”，因为toggle不是一个事件，它只是jQuery中的一个方法。因此，您需要为委派事件实现自己的切换功能。

样本解决方案：

$("body").on("click", ".like", function () {
    var $this = $(this);
    var toggled= $this.data("toggled");
    if (toggled) {
        console.log('rel');
    } else {
        console.log('href');
    }
    $this.data("toggled", !toggled);
});

我还建议将上面代码中的选择器从“body”更改为.like元素的父容器，这样委托就会缩短文档树的位置。

和样本小提琴：http://jsfiddle.net/t2pXr/3/

使用AJAX冒泡jQuery事件

4 个答案: