Question

我有这个html标签，我点击了一个点击事件在此之后通过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。

看看这个有效的demo

$(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会在文档中添加一个侦听器，并检查在那里注册的任何事件是否与您放入的选择器匹配。但是您点击该元素本身，因此它在clicklistener之前执行。（这也记录在jQuery的实况页面上）。

不过，在jQuery 1.4中，最好使用委托。

jquery：使用e.stopPropagation（）对动态添加的html不起作用

3 个答案: