Question

我正在尝试这种jQuery方式的pub-sub，它只能部分工作：

<button id="button1">click1</button>
<button id="button2">click2</button>
<div id="div1">div1</div>

$("button:first").bind('bla', function (e, text) {
    alert("bla1 " + text);
});
$("#div1").bind('bla', function (e, text) {
    alert("div " + e, text);
});

$("button:last").click(function () {
    $("button:first").trigger('bla', ["ilya"]);
});

为什么事件仅在button1而非div1上触发？

更新：有没有办法触发所有绑定的自定义事件而不调用它们绑定到的元素？

Answer 1

你也需要在div上触发它：

$("button:last").click(function () {
    $("button:first, #div1").trigger('bla', ["ilya"]);
});

修改

看到你的后续问题。我不完全清楚用例是什么，但我的建议是两种方法之一：

--- 1 --- 添加CSS类，例如class="my-listener"您希望在自定义事件上收听的任何元素：

<button id="button1" class="my-listener">click1</button>; <button id="button2">click2</button>; <div id="div1" class="my-listener">div1</div>;

...和...

// Your original lister code is fine. Only need to do these individually (as opposed to my original suggestion, above) if you need each element to do something different when it catches the event) $("button:first").bind('bla', function (e, text) { alert("bla1 " + text); }); $("#div1").bind('bla', function (e, text) { alert("div " + e, text); });

...然后触发这样的事件：

$('.my-listener').trigger('bla', ["ilya"]);

这应该有效。

--- 2 --- 只需触发window对象上的事件，并拥有一个具有逻辑的侦听器，可以为单个侦听器中的每个元素执行所需操作：

$(window).bind('blah', function(event, data){ // Do something for button:last // Do something with #div1 // etc. }); $(window).trigger('bla', ['ilya']);

你使用哪种方法（我确信还有其他方法）只取决于你想要实现的目标。

干杯

Answer 2

因为您没有在#div1上触发它。

$("button:last").click(function () {
    $("button:first").trigger('bla', ["ilya"]);
    $("#div1").trigger('bla', ["ilya"]); // you need to trigger it
});

http://jsfiddle.net/5XZbY/

Answer 3

为什么要触发？

如果您点击#button2，click事件会触发bla的{{1}}事件。来自button1的{{1}}事件永远不会被触发。你想要这样的东西吗？

http://jsfiddle.net/j4yKU/

bla

Answer 4

当您点击第二个按钮时，它会在您的第一个按钮上触发“bla”，它会提示您退出文本。您应该在第一个按钮的'bla'事件中触发div的事件。

jQuery自定义事件只能部分工作

4 个答案: