如何解决首次使用后,添加了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
});
};
});
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。