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

由于您已使用.replaceWith()，因此已将span类two动态添加到DOM中，因此所有事件在您将其附加到此之前将无法使用span。

在这种情况下，您可以使用 event delegation ：

事件委托允许我们将单个事件监听器附加到父元素，将为匹配选择器的所有子项触发，这些孩子现在是否存在，或将来是否存在。

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

Answer 2

这是因为新的.two是动态添加的，但点击处理程序已经附加到现有的.two div，然后才会存在新的$('.galery').on('click', '.two', change_content); div。您需要将处理程序附加到始终存在的元素，然后使用它来处理对子元素的单击。这称为事件委托。在jQuery中，它将像这样完成：

.galery

因此，on()响应所有点击它及其子节点，如果点击目标与.two调用（{{1}}）中的选择器匹配，它将调用处理函数

jQuery replaceWith只工作一次

2 个答案: