jQuery的replaceWith只工作一次

Question

我正在尝试用另一个元素替换一个元素。它只能工作一次，然后当我尝试再次单击元素 .two 时，它不会调用该函数。

这是代码，它包裹在 django for 循环中。这就是为什么我需要使用 $(this):

<div class = "galery">

{% for image in images %}

<img class = 'one' src = "http://www.fmscout.com/datas/avatars/48327-chelsea-logo.jpg">
<span class='glyphicon glyphicon-certificate two'></span>

{% endfor %}

</div>

<script>
$('.two').on('click', change_content);

function change_content(){
    var one = $('.galery').find('.one')
    $(this).replaceWith("<img class = 'one' src ='http://www.fmscout.com/datas/avatars/48327-chelsea-logo.jpg'>")
    one.replaceWith("<span class='glyphicon glyphicon-certificate two'></span>")
}

</script>

Answer 1

这是因为新的 .two 是动态添加的，但在新的 .two div 存在之前，点击处理程序已经附加到现有的 .two div 上。您需要将处理程序附加到始终存在的元素，然后使用它来处理对子元素的点击。这称为事件委托(delegate)。在 jQuery 中，它会像这样完成:

$('.galery').on('click', '.two', change_content);

因此，.galery 响应对其及其子项的所有点击，并且如果点击目标与 on() 调用中的选择器匹配 (.galery)两个)，它将调用处理函数。