jquery - Jquery类点击事件多次调用

Question

我正在尝试在 jquery 中附加带有类（menuSelector）的图像，然后在单击类时编写一些功能。

$("<div>").addClass("node").append($("<img>", { src: menuImg, class: "menuSelector" }))
                                 .data("tree-node", nodeCount)
                                 .append($nodeContent);

$('.menuSelector').live("click",function (event) {
     alert('I am clicked');
    });

现在的问题是针对它找到的每个图像项循环调用类单击事件。

HTML：

<div class="node" style="cursor: n-resize;">
<img src="/GroupTree/styles/pointer.gif" class="menuSelector">Group 1</div>

<div class="node" style="cursor: n-resize;">
<img src="/GroupTree/styles/pointer.gif" class="menuSelector">Group 2</div>

我想，如果我关闭了图像标签，我的问题可能会解决，但它没有关闭:(

我试过了：

.append($("<img/>", { src: menuImg, class: "menuSelector" }))
and
.append($("<img/>", { src: menuImg, class: "menuSelector" },"</img>"))
and
.append($("<img/>", { src: menuImg, class: "menuSelector" })).append($("</img>"))

但他们没有工作。

Answer 1

.append($("<img/>", { src: menuImg, class: "menuSelector" }))是正确的。

我敢打赌，您的问题与使用$.fn.live. 尝试使用$.fn.bind，或者如果这不起作用，请尝试<div>使用$.fn.delegate.

如果以前的解决方案不起作用，您可能还需要发布更多代码以使您的意图更清晰。

Answer 2

尝试使用this 类似的东西：

$('.menuSelector').on("click",function (event) {
    console.log(this); // this - add some action for this
    $(this).hide(); // for test ))
 });

Answer 3

线

$('.menuSelector').live("click",function (event) { alert('我被点击'); });

在每次迭代中使用 menuSelector 类将事件注册到每个元素！

试着做

var img = $("<div>").addClass("node").append($("<img>", { src: menuImg, class: "menuSelector" }))
img.live("click",function (event) {
     alert('I am clicked');
    });
img.data("tree-node", nodeCount).append($nodeContent)

这将只为当前图像添加回调

顺便说一句，.live 已被弃用并被删除 - 请参阅http://api.jquery.com/live/

Answer 4

这一条简单的线在我的情况下有所帮助：

event.stopImmediatePropagation();

把它放在你的函数调用之后

https://api.jquery.com/event.stopimmediatepropagation/