Jquery класс вызывает вызовы событий несколько раз

Question

Я пытаюсь добавить изображение с помощью класса (menuSelector) в jquery и затем написать некоторые функции при щелчке класса.

$("<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.) Жить ("щелчок", функция (событие) { предупреждение ("Я щелкнул'); }).

зарегистрируйте событие для каждого элемента с классом 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/