首次使用后，添加了jQuery的onclick处理程序不起作用

问题描述

| 我想通过单击选择文本后出现的按钮来修改所选文本。第一次迭代时，它可以正常工作-根据需要替换文本。在第二次迭代中，似乎是从上一次迭代中保留了文本（模式未更新），并且没有任何效果。您能帮忙解决它吗？该演示如下。我尝试执行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>

有任何想法吗？

解决方法

第一次鼠标上移后，创建selectionImage HTMLElement，它只有一个click事件。单击带有parent =第一个标签的selectionImage调用click事件，然后删除第一个标签。在第二次mouseup之后，您将创建另一个click事件，该事件绑定到selectionImage。单击您在第一步中创建的selectionImage调用首次单击事件，父级不存在（在第2步中删除了第一个标签），因此它没有值\'parentNode \'。并且处理停止。主要问题是您在文档上的每个mouseup上都创建了新的click事件。这些点击事件具有不同的父项，并按顺序执行。 ,一键事件，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
        });
    };

});

onclick 不起作用不起作用处理处理用后程序程序程序首次

首次使用后，添加了jQuery的onclick处理程序不起作用

问题描述

解决方法

相关问答