Question

当我使用.html()，.append()或.appendTo()在DOM中添加元素时，我无法定位添加的元素。

HTML

<div>
    <em class="button" id="old">old button</em>
</div>

的jQuery

var newButton = '<em class="button" id="new">new button</em>'
var oldButton = '<em class="button" id="old">old button</em>'

$('#old').click(function(){
    $('div').html(newButton);
});

$('#new').click(function(){
    $('div').html(oldButton);
});

后一个代码用<em class="button" id="old">old button</em>替换原始<em class="button" id="new">new button</em>，但后来我无法使用jQuery定位新添加的#new。

我找不到关于.html() API文档的解释，任何想法？

以下是您可以更新的JSFiddle。

Answer 1

您需要对动态添加/更改的元素使用 event delegation 。

＆＃13;

var oldButton = '<em class="button" id="old">old button</em>'
var newButton = '<em class="button" id="new">new button</em>'
$(document).on('click', '#old', function(){
    $(this).closest('div').html(newButton);
});
$(document).on('click', '#new', function(){
    $(this).closest('div').html(oldButton);
});

＆＃13;

.button {
    display:inline-block;
    padding: 10px;
    cursor: pointer;
}
#old { background-color: yellow; }
#new { background-color: orange; }

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js"></script>
<div>
    <em class="button" id="old">old button</em>
</div>

＆＃13;

Answer 2

由于#new元素在创建单击处理程序时尚不存在，因此未正确绑定。一个不需要不断重新绑定事件处理程序的解决方案：

$('#old').click(function(){
    $('#old').addClass('hidden');
    $('#new').removeClass('hidden');
});
$('#new').click(function(){
    $('#new').addClass('hidden');
    $('#old').removeClass('hidden');
});

有关随附的html / css，请参阅this Fiddle。

Answer 3

虽然有更好的方法可以达到你想要的效果（请参阅Renzo Poddighe的回答和Rejith R Krishnan的回答），这就是你需要做的事情：创建时重新绑定click事件新元素。最好使用off方法删除旧的事件处理程序。

var oldButton = '<em class="button" id="old">old button</em>'
var newButton = '<em class="button" id="new">new button</em>'
function bindOldEvent() {
    $('#old').click(function(){
        $('div').off().html(newButton);
        bindNewEvent();
    });
}

function bindNewEvent() {
    $('#new').click(function(){
        $('div').off().html(oldButton);
        bindOldEvent();
    });
}
bindOldEvent();

http://jsfiddle.net/mdrwm5zn/2/

jQuery：使用.html（）或.append（）添加的目标元素

3 个答案: