jquery: использование e.stopPropagation () для динамически добавленного HTML не работает

Question

У меня есть html-теги, которые я обработал с помощью события click.
После этого через jquery я динамически добавляю к нему еще один тег (span).
Я хочу, чтобы промежуток не выполнял оповещение, как?
(если я нажму на «Я новый текст» - Я хочу, чтобы ничего не случилось )
Вы можете проверить это здесь: http://jsfiddle.net/r97AT/16/
что я тут не работал:

<b onclick="alert('q1')" id="q1" class="test">test</b>
<br>
<b onclick="alert('q2')" id="q2" class="test">test</b>
<br>
<b onclick="alert('q3')" id="q3" class="test">test</b>

$(document).ready(function () {
    $(".test").each(function () {
        $(this).append(function () {
            return $('<span id="newChild_'+$(this).attr('id')+'" style="color:red"> I am new Text</div>');
        });
        $('#newChild_' + $(this).attr('id')).live('click', function (e) {
            e.stopPropagation();
        });

    });
});

Answer 1

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

$(document).ready(function () {
    $(".test").each(function () {
        $(this).append( $('<span id="newChild_'+$(this).attr('id')+'" style="color:red"> I am new Text</div>').bind('click', function (e) {
            e.stopPropagation();
        }) );
    });
});

Answer 2

live использует механизм всплытия событий и прикрепленный обработчик событий к объекту тела документа. Даже если вы попытаетесь остановить распространение события в обработчике live, оно не будет работать, потому что сразу после цели события есть тег b, который прослушивает это событие. Вы можете попробовать использовать bind после динамического добавления разметки.

Взгляните на это рабочее демо

$(document).ready(function () {
    $(".test").each(function () {
        $(this).append(function () {
            return $('<span id="newChild_'+$(this).attr('id')+'" style="color:red"> I am new Text</div>');
        });
        $('#newChild_' + $(this).attr('id')).bind('click', function (e) {
            e.stopPropagation();
        });

    });
});

Answer 3

Live добавляет слушателя к документу и проверяет, соответствует ли какое-либо зарегистрированное там событие выбранному вами селектору. Но вы нажимаете на элемент непосредственно на элементе, поэтому он выполняется перед щелчковым списком.(это задокументировано и на live-странице jQuery).

Кстати, в jQuery 1.4 лучше использовать делегат.