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

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 用于动态创建的元素

演示http://jsfiddle.net/1pwq822r/2/

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