Fatal编程技术网
  • javascript/
  • Javascript 使用jQuery添加的onclick处理程序不'；第一次使用后不能工作

Javascript 使用jQuery添加的onclick处理程序不'；第一次使用后不能工作

javascript jquery

Javascript 使用jQuery添加的onclick处理程序不'；第一次使用后不能工作,javascript,jquery,javascript-events,event-handling,Javascript,Jquery,Javascript Events,Event Handling,我想通过单击选定文本后出现的按钮来修改选定文本。 在第一次迭代中，它工作得很好-文本会根据需要被替换。 在第二次迭代中，文本似乎是上一次迭代留下的（模式没有更新），没有任何效果。 你能帮我修一下吗。下面是演示 我尝试执行live（'click'，function…而不是click（），以根据此处的一些线程更新模式，但它似乎不起作用 编辑： <html> <head> <title>Border revision</title> </he

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

我尝试执行
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>
决定将整个演示包含在内，以便更清楚地说明：

<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>


边界修订


选择红方块中的文本，然后单击？按钮第一次工作，第二次不工作。为什么？
一些文字试试看一些文字
第二次尝试3不起作用；(






#显示气泡{背景：url（bubble.png）0 0无重复；宽度：25px；高度：29px；位置：绝对；顶部：-50px；左侧：-50px；}
函数getSelected（）{
if（window.getSelection）{return window.getSelection（）；}
else if（document.getSelection）{return document.getSelection（）；}
否则{
var selection=document.selection.createRange（）；
if（selection.text）{return selection.text；}
返回false；
}
返回false；
}
函数处理（）{
变量选择图像；
$（文档）.mouseup（函数（e）{
var selection=getSelected（）；
var parent=selection.anchorNode.parentNode；
if（selection&（selection=newstring（selection）.replace（/^\s+|\s+$/g，，））{
如果（！selectionImage）{
selectionImage=$（''）.attr({
//~href:url，
标题：“单击此处删除边框”，
//~target:“\u blank”，
id:'显示bubb'
}).hide（）；
$（document.body）.append（selectionImage）；
}
selectionImage.css({
顶部：e.pageY-30，//偏移量
左：e.pageX-13//offset
}).fadeIn（）；
选择图像。单击（函数（）{
//父节点=selection.anchorNode.parentNode；
如果（父项==null）{
//警惕（ZOZO）；
返回“”；
}
否则{
//创建选定的字符串
var text=document.createTextNode（字符串（选择））；
//~alert（“之前”）；
//警报（字符串（选择））；
parent.parentNode.insertBefore（文本，parent.nextSibling）；
parent.parentNode.removeChild（父级）；
//~alert（“after”）；
}
});
};
});
$（document.body）.mousedown（函数（）{
if（selectionImage）{selectionImage.fadeOut（）；}
});
};
$（文档）.ready（函数（）{
处理（）；
});
有什么想法吗

  • 第一次鼠标点击后，创建selectionImage HTMLElement，它只有一次点击事件
  • 单击selectionImage call，单击父项为第一个标签的事件，然后删除第一个标签
  • 第二次鼠标点击后，创建另一个与selectionImage绑定的点击事件
  • 单击selectionImage调用在第一步中创建的first click事件，父项不存在（在第2步中删除了第一个标签），因此它没有值“parentNode”。处理将停止
    • 主要问题是您在文档上的每个鼠标上创建了新的单击事件。这些单击事件具有不同的父级并按顺序执行。

    单击事件，变量通过jquery方法data（）传递到selectionImage

    $（文档）.mouseup（函数（e）{
var selection=getSelected（）；
var parent=selection.anchorNode.parentNode；
if（selection&（selection=newstring（selection）.replace（/^\s+|\s+$/g，，））{
如果（！selectionImage）{
selectionImage=$（''）.attr({
//~href:url，
标题：“单击此处删除边框”，
//~target:“\u blank”，
id:'显示bubb'
}).text（'test'）。单击（函数（）{
var parent=$（this.data（'parent'）；
变量选择=$（this）.data（'selection'）；
//父节点=selection.anchorNode.parentNode；
如果（父项==null）{
//警惕（ZOZO）；
返回“”；
}
否则{
//创建选定的字符串
var text=document.createTextNode（字符串（选择））；
//~alert（“之前”）；
//警报（字符串（选择））；
parent.parentNode.insertBefore（文本，parent.nextSibling）；
parent.parentNode.removeChild（父级）；
//~alert（“after”）；
}
}).hide（）；
$（document.body）.append（selectionImage）；
}
selectionImage.css({
顶部：e.pageY-30，//偏移量
左：e.pageX-13//offset
}).fadeIn（）；
selectionImage.data({
选择：选择，
家长：家长
});
};
});
    是的，您的回答完全正确，并且提供了一个很好的问题摘要。问题是如何解决此问题，以便让处理程序可以进行多次单击？