jQuery:使用.html()或.append()添加的目标元素

Question

当我添加在DOM元素使用.html(),.append()或者.appendTo(),我便不管理的目标添加的元素.

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>,但后来我没有设法将新添加#new的jQuery 作为目标.

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

这是一个可以更新的JSFiddle.

Answer 1

您需要对动态添加/更改的元素使用事件委派.

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);
});

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

<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>