jquery - jQuery 自定义事件仅部分起作用

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"]);
});​

为什么事件只触发 onbutton1而不是 on 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触发事件。from的事件永远不会被触发。你想要这样的东西吗？blabutton1bla#div1

http://jsfiddle.net/j4yKU/

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

Answer 4

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