Question

我是this page。您可以使用页面右侧提到的不同标记突出显示页面上不同的文本区域。

每当您标记某个区域时，会在标记的类别中添加span。因此，假设您使用右侧的黄色标记。将使用以下范围标记覆盖突出显示的区域。 <span class="mark1">[ highlighted text ]</span>。

我想要做的只是当用户点击此span标记时，我想改变它的边框。但不知何故，我无法做到这一点。

这就是我想要做的事情。

$("#sachverhalt").find("span").on("click","span[class='mark1'],span[class='mark2'],span[class='mark3'],span[class='mark4'],span[class='mark5']",function(){
    $(this).css('border',"1px solid #000000");
});

修改

标签结构如下所示。

<div id="sachverhalt">
 <article>
   <p>
     <span>
       [some random text]
       <span class="mark1">
         [highlighted text]
       </span>
       [some random text]
     </span>
   </p>
 </article>
</div>

当用户突出显示<span class='mark1'><span>标记时，动态添加该标记。

有人可以告诉我为什么没有这个活动被召唤？

Answer 1

你必须使用$（document）.on（事件，选择器，函数）否则，事件处理程序将不会绑定到新元素。

这也适用于:(删除查找（＆＃34; span＆＃34;））

$("#sachverhalt").on("click","span[class='mark1'],span[class='mark2'],span[class='mark3'],span[class='mark4'],span[class='mark5']",function(){
    $(this).css('border',"1px solid #000000");
});

http://api.jquery.com/on/

Answer 2

在页面加载后将元素添加到DOM时，需要将偶数绑定到DOM加载时存在的元素。因此，为了让您单击工作，绑定到正文的侦听器。

$("body #sachverhalt").find("span").on("click","span[class='mark1'],span[class='mark2'],span[class='mark3'],span[class='mark4'],span[class='mark5']",function(){
    $(this).css('border',"1px solid #000000");
});

点击事件无法动态添加的子元素

2 个答案: