Question

我试图在jquery中用class（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

尝试使用this 类似的东西：

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

Answer 2

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

我打赌你的问题以某种方式连接到$.fn.live的使用。尝试使用$.fn.bind或如果不起作用，请尝试使用<div>从父$.fn.delegate委派。

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

Answer 3

该行

$（'。menuSelector'）。live（“click”，function（event）{ 警报（'我被点击'）; }）;

在每次迭代中使用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/

Jquery类多次单击事件调用

4 个答案: