2012-03-26 4 views
0

Я упростил свой код для следующего примера. Поэтому, пожалуйста, не удивляйтесь, почему я использую ajax здесь.Область применения jQuery (javascript)

<!DOCTYPE> 
<head> 
    <style>.not { background:yellow; }</style> 
    <script type="text/javascript" src="http://code.jquery.com/jquery-latest.min.js"></script> 
    <script> 
    $(document).ready(function() { 
     $(".not").click(function(e){ 
      e.stopPropagation(); 
      alert('good'); 
     }); 
     $(".click").click(function(e){ 
      $.post('page2.php', 'q=1', function(data){ 
       $('body').append('<p class="click">Click here to add new paragraph <span class="not">[not here]</span></p>'); 
      }, "json"); 
     }); 
    }); 
    </script> 
</head> 
<body> 
    <p class="click">Click here to add new paragraph <span class="not">[not here]</span></p> 
</body> 

Новые строки не предупреждают о классе = нет! Это необъяснимо для меня: '(

Спасибо за unswer

+0

Во всяком случае, Аякса не нужны для этого примера –

+0

раздел [здесь нет] новых строк, не видят $ («нет»). Нажмите (функция (е) { e.stopPropagation(); alert ('good'); }); –

+0

Фактически, для этого примера нужен ajax. это то, что не работает. –

ответ

6

Предполагая JQuery 1.7.x, используйте:

$(document).on('click', ".not", function(e){ 
    alert('good'); 
}).on('click', ".click", function(e){ 
    if(!$(e.target).is('.not')) { 
     $('body').append('<p class="click">Click here to add new paragraph <span class="not">[not here]</span></p>'); 
    } 
}); 

Проблема заключается в том, что .click связывается только с элементами, которые существуют, когда они вызывается. Используя метод .on, я предлагаю делегатам обработать клики на элемент document. Передавая селектор в качестве второго аргумента, вы указываете jQuery на запуск обработчика событий только в том случае, если цель события соответствует селектору.

+0

@ Подумай, ты прав. Я удаляю эту строку из примера, так как я не вижу причин использовать ее в любом случае. – bfavaretto

+0

Причина заключается в том, чтобы запретить кликам внутри 'span' запускать обработчик на элементе' .click ''. С вашим текущим кодом события все равно будут пузыряться из '[не здесь]'. –

+0

@amnotiam: Добавлена ​​проверка, основанная на 'event.target', чтобы справиться с этим. Наверное, я просто слишком быстро отвечаю на этот вопрос. – bfavaretto

1

Поместите $(".not")... часть внутри функции, такие как disableNot = function() {$(".not").click......} Затем, после добавления нового пункта, вызовите disableNot() обновить обработчик событий (также!.. . disableNot называют сразу после его определения, так что любые .not элементы уже на странице приведены их обработчики)

1

В вашем обработчике событий ready вы используете $('.not).click. click - это псевдоним для bind, а bind работает только с элементами, которые уже находятся в DOM.

Если вы используете jQuery 1.7, вы можете использовать on вместо этого в своей форме delegate.

Смежные вопросы