jQuery, используя событие bubbling и встроенные divs

Question

У меня проблема с использованием jQuery.

Я создаю divs на лету с помощью javascript, и это является причиной использования пузырьков событий для привязки этих div с моими функциями jQuery. Я использую тело тега, чтобы начать находить divs с атрибутом productId, который я создаю на лету. Проблема в том, что при щелчке в одном из div внутри div с атрибутом productId не запускаются. Только в части div, которая не содержит других встроенных div. Может ли кто-нибудь помочь мне? ;)

Это код:

<div class="cartProduct" productId="2"> 
    <div class="names">Patatoes</div> 
    <div class="units">5</div> 
</div> 

$('body').click(function(event) { 
    if($(event.target).is('[productId]')) { 
    ... 
    } 
} 

Answer 1

Попробуйте это:

$('body').on('click','[productId]',function(event) { 
    // do something 
}); 

Демо: http://jsfiddle.net/L5jg8/

Это использует делегированные форму .on() method. Когда происходит щелчок по телу, jQuery проверяет, был ли он на элементе, который соответствует селектору во втором параметре. (Если вы используете старую версию JQuery вам нужно использовать .delegate() вместо .on(). Если вы используете старую версию смехотворно попробовать .live().)

Ваш существующий код не работает, потому что event.target дает вам элемент DOM, инициировавший событие, т. е. дочерний элемент самого низкого уровня, на который вы нажали (который, как вы нашли, может быть одним из дочерних элементов div, который вы пытаетесь проверить).