1

我很难让一些 jQuery 函数正常工作。

我的网站上有一个点赞按钮，该按钮在添加新项目之前一直有效，然后停止工作。当我有以下代码时，这有效：

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

我的一个朋友指导我使用事件冒泡，但我很难让它发挥作用。

这是我目前所拥有的。

简单的 HTML

​&lt;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/

4

4 回答 4

2

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

$('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.

于 2012-05-31T08:39:44.317 回答
1

您可能正在寻找.on()（或.delegate()用于 jQuery 版本 < 1.7）

于 2012-05-31T08:41:43.190 回答
1

要么是代码悖论的解决方案，要么是在 ajax 调用之后 Hook 事件在 DOM 中添加了新元素。但是codeparadox的解决方案更好。

于 2012-05-31T08:43:56.543 回答
1

问题是，我们不能委托“切换”，因为切换不是一个事件，它只是 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/

于 2012-05-31T09:26:27.860 回答