使用 jQuery 添加的 onclick 处理程序在第一次使用后不起作用答案

【问题标题】：onclick handler added with jQuery doesn't work after first usage使用 jQuery 添加的 onclick 处理程序在第一次使用后不起作用
【发布时间】：2011-04-15 01:48:25
【问题描述】：

我想通过单击选择文本后出现的按钮来修改选定的文本。在第一次迭代它工作正常 - 文本根据需要被替换。在第二次迭代中，文本似乎是前一次迭代留下的（模式没有更新），没有任何效果。你能帮忙修复它吗？演示如下。

我尝试使用live('click', function ...) 而不是click() 来根据此处的一些线程更新模式，但它似乎不起作用。

编辑：

决定包含整个演示，以便更清晰：

<html>

<head>

<title>Border revision</title>

</head>

<body>

<BR />

<h2>Select text in the red square and then click ? button. First time work, second not. Why? </h2>

<div>

some text <span style="border: solid 2px red" class="VAL">try it</span>  some text
second attempt <span style="border: solid 2px red" class="VAL">3</span> doesn't work ;(

<hr><br>

</div>

<hr></br>

<div id="selection-image"></div>

<style type="text/css">

    #show-bubb { background:url(bubble.png) 0 0 no-repeat; width:25px; height:29px; position:absolute; top:-50px; left:-50px; }

</style>

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.5.1/jquery.min.js" ></script>


<script>
function getSelected() {

    if(window.getSelection) { return window.getSelection(); }

    else if(document.getSelection) { return document.getSelection(); }

    else {
        var selection = document.selection.createRange();
        if(selection.text) { return selection.text; }
        return false;
    }
    return false;
}

function processing() {

    var selectionImage;

    $(document).mouseup(function(e) {

        var selection = getSelected();
        var parent = selection.anchorNode.parentNode;

        if(selection && (selection = new String(selection).replace(/^\s+|\s+$/g,''))) {

            if(!selectionImage) {
                selectionImage = $('<label>').attr({
                    //~ href: url,
                    title: 'Click here to remove border',
                    //~ target: '_blank',
                    id: 'show-bubb'
            }).hide();

            $(document.body).append(selectionImage);
            }

            selectionImage.css({
                top: e.pageY - 30, //offsets
                left: e.pageX - 13 //offsets
            }).fadeIn();

            selectionImage.click(function() {       
                //parent = selection.anchorNode.parentNode;         
                if (parent == null) {
                    //alert(ZOZO);
                    return "";
                }
                else {      
                    //create a string selected  
                    var text = document.createTextNode(String(selection));
                    //~ alert("before");
                    //alert(String(selection));
                    parent.parentNode.insertBefore(text, parent.nextSibling);
                    parent.parentNode.removeChild(parent);  
                    //~ alert("after");             
                }


            });
        };

    });

$(document.body).mousedown(function() {

    if(selectionImage) { selectionImage.fadeOut(); }

});

};




$(document).ready(function() {

processing();

});




</script>

有什么想法吗？

【问题讨论】：

标签： javascript jquery javascript-events event-handling

【解决方案1】：

在第一次 mouseup 之后，您创建 selectionImage HTMLElement，它只有一次点击事件。
单击 selectionImage 调用 click 事件，父级 = 第一个标签并删除第一个标签。
在第二次 mouseup 之后，您将创建另一个绑定到 selectionImage 的单击事件。
单击 selectionImage 调用您在第一步中创建的第一次单击事件，父级不存在（第 2 步中删除的第一个标签），因此它没有值“parentNode”。处理停止。

主要问题是您在文档上的每个 mouseup 上创建新的单击事件。这些点击事件有不同的父级并按顺序执行。

【讨论】：

是的，你是绝对正确的，并提供了一个很好的问题总结。问题是如何解决这个问题，以便让处理程序不止一次点击？

【解决方案2】：

点击事件，vars通过jquery方法data()传给selectionImage

$(document).mouseup(function(e) {

    var selection = getSelected();
    var parent = selection.anchorNode.parentNode;

    if(selection && (selection = new String(selection).replace(/^\s+|\s+$/g,''))) {

        if(!selectionImage) {
            selectionImage = $('<label>').attr({
                //~ href: url,
                title: 'Click here to remove border',
                //~ target: '_blank',
                id: 'show-bubb'
            }).text('test').click(function() {
                var parent = $(this).data('parent');
                var selection = $(this).data('selection');
                //parent = selection.anchorNode.parentNode;         
                if (parent == null) {
                    //alert(ZOZO);
                    return "";
                }
                else {      
                    //create a string selected  
                    var text = document.createTextNode(String(selection));
                    //~ alert("before");
                    //alert(String(selection));
                    parent.parentNode.insertBefore(text, parent.nextSibling);
                    parent.parentNode.removeChild(parent);  
                    //~ alert("after");             
                }
            }).hide();

        $(document.body).append(selectionImage);
        }

        selectionImage.css({
            top: e.pageY - 30, //offsets
            left: e.pageX - 13 //offsets
        }).fadeIn();
        selectionImage.data({
            selection: selection,
            parent: parent
        });
    };

});

【讨论】：