Question

我正在使用此网站link的jquery荧光笔。您可以选择文字，荧光笔会将其打包在<span> example

中

我在文本的突出显示部分注册点击事件时遇到问题。我已经阅读过关于动态添加的元素，你必须使用.on()函数，但我无法使其工作。

以下是jsfiddle我的代码位于javascript的底部。我认为荧光笔中有一些东西可以阻止点击事件，但是我的javascript技能还不足以弄清楚是什么。

这就是我试图注册点击事件的方式

$(document).ready(function() {
    $('#sandbox').textHighlighter();

    $('#sandbox').on('click', 'span.highlighted', function(){
        alert("Click was registered");
    });
});

Answer 1

两件事 - 你使用的是早期版本的jQuery（1.6.4），它不支持on() （你可以使用delegate()）并且需要你的语法稍微调整一下 -

$(document).on('click', 'span.highlighted', function(){
    console.log("Click was registered");
});

应该对jQuery最初运行时页面上存在的元素进行委托。在这种情况下，事件将冒泡到'文档'，它在代码运行时安全存在。选择器也可以是'#sandbox'。

另一个注意事项，始终使用console.log()进行故障排除，而不是alert()。

Working Example

Answer 2

将.live用于动态创建的元素

DEMO http://jsfiddle.net/1pwq822r/2/

$('#sandbox').live('click', 'span.highlighted', function () {
        alert("Click was registered");
});

用于突出显示单击事件上的单词块的jQuery插件

2 个答案: