javascript - 如何使用 javascript/jquery 动态添加 onclick ="select_all(this)"？

Question

所以我发现了这个很棒的负鼠，它可以select_all跨度标签中的文本:

<script type="text/javascript">
    function select_all(el) {
        if (typeof window.getSelection != "undefined" && typeof document.createRange != "undefined") {
            var range = document.createRange();
            range.selectNodeContents(el);
            var sel = window.getSelection();
            sel.removeAllRanges();
            sel.addRange(range);
        } else if (typeof document.selection != "undefined" && typeof document.body.createTextRange != "undefined") {
            var textRange = document.body.createTextRange();
            textRange.moveToElementText(el);
            textRange.select();
        }
    }
</script>


<span class="select-all" onclick="select_all(this)">This text becomes selectable</span>

Here's the fiddle

我的问题是，如何使用 select-all 类将内联 JavaScript 动态添加到所有 span 标记中？我仍然是 javascript 的新手，所以我似乎找不到任何提到如何执行此操作的内容(那个或它让我感到困惑)。

Answer 1

这是为所有具有 select-all class 的现有元素创建 click 事件处理程序的方法:

$(".select-all").click(function() {
    //do something
});

这是为所有具有select-all class的现有span定义事件处理程序的方法:

$("span.select-all").click(function() {
    //do something
});

这是为所有具有 select-all class 的现有和 future 元素定义事件处理程序的方法:

$("body").on("click", ".select-all", function(e) {
    //do something
});

这是为所有现有和 future 具有select-all class的现有和 future span定义事件处理程序的方法:

$("body").on("click", "span.select-all", function(e) {
    //do something
});

如果您想要为容器内所有现有和 future 具有 select-all class 的现有和 future span 提供特定的事件处理程序，则具有 选择器，那么这就是你如何做到的:

$(selector).on("click", "span.select-all", function(e) {
    //do something
});

请注意，在最坏的情况下，选择器是“body”。