С помощью.on() и e.stopPropagation() на динамических элементах

я экспериментировал с захватом событий щелчка вне элементов, используя stopPropagation(). 

$(".container").children().on('click',function(e){
  e.stopPropagation();    
});
$(".container").on("click",function(){
  alert("outside the box?");    
})​

вот jsfiddle настроен, чтобы продемонстрировать его функционирование. Предупреждение должно срабатывать при нажатии в любом месте за пределами белого поля.

Теперь я пытаюсь применить тот же принцип к динамически созданным элементам. Насколько я понимаю,on() метод назначения событий в jQuery должен позволить этому функционировать без изменения сценарий.

вот второй jsFiddle где вы должны сначала щелкнуть ссылку, чтобы создать элементы. Как только вы это сделаете, теория заключается в том, что один и тот же сценарий будет работать, но это не так. Что мне не хватает в этом методе?

7
javascript javascript-events jquery

5 ответов

короче говоря, вам нужно поставить on() на существующем родительском элементе, чтобы он работал:

$('body').on('click', 'a', function(e){
    e.preventDefault();
    $('<div class="container"><div class="box"></div></div>').appendTo('body');
    $(this).remove();
});

$('body').on('click', '.container > *', function(e){
  e.stopPropagation();    
});

$('body').on('click', '.container', function(){
  alert("outside the box?");    
})​

код:http://jsfiddle.net/GsLtN/5/

для более подробной проверки '.on ()' на официальном сайте в разделе 'прямые и делегированные события'

5

когда элемент добавляется динамически, вы должны прикрепить обработчик к ближайшему родителю, который наверняка будет там - в вашем случае это body. Вы можете использовать on() этот способ достижения функциональности это delegate() используется:

$(селектор-для-родителей).on (событий, селектор-для-динамический-детей, проводник);

таким образом, ваш код будет переписан просто так:

$("body").on('click', '.container', function(e){
    var $target = $(e.target);
    if ($target.hasClass('container')) {
        alert("outside the box!");
    }
});

Я e.target чтобы найти, какой элемент вызвал событие. В этом случае я идентифицирую элемент, проверяя, имеет ли он container класса.

демо jsFiddle

5

демо.

при привязке обработчика событий к элементу используйте .on целевая привязка должна существовать в domcument.

$('body').on('click', '.container > *', function(e){
  e.stopPropagation();    
});
$('body').on("click",'.container',function(){
  alert("outside the box?");    
})​
2

вам нужно связать .on() для родителей.

то, что вы пытаетесь сделать, - привязать обработчик к родителю, который слушает событие, а затем проверяет, было ли событие вызвано элементом, который соответствует этому селектору.

$("body").on("click", '.container',function(){
  alert("outside the box?");    
})​

обновленный скрипку здесь

2

согласно документации для jQuery.on():

обработчики событий привязаны только к выбранным элементам; они должен существовать на странице в то время, когда ваш код делает вызов .on().

вы должны привязать событие к родительскому контейнеру. Возможно, что-то вроде этой.

1