Question

所以我找到了这个令人敬畏的负鼠，可以select_all span标记中的文本：

<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

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

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

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

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

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

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

这是为span select-all所有现有和未来class定义事件处理程序的方法：

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

如果您想要一个容器内有span select-all的所有现有和未来class的特定事件处理程序，拥有selector，那么这就是你要做的它：

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

请注意，selector在最糟糕的情况下为"body"。

Answer 2

你可以做这样的事情

$('document').ready(function(){
    $('.select-all').click(function (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();
        }
    });
});

快乐编码。

如何添加onclick =＆＃34; select_all（this）＆＃34;用javascript / jquery动态地？

2 个答案: