使用 jQuery 添加的 onclick 处理程序在第一次使用后不起作用
[英]onclick handler added with jQuery doesn't work after first usage
问题描述
我想通过单击选择文本后出现的按钮来修改选定的文本。 在第一次迭代时它工作正常 - 根据需要替换文本。 在第二次迭代中，文本似乎是前一次迭代留下的（模式没有更新），没有任何效果。 你能帮忙解决一下吗。 演示如下。
我尝试使用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>
有任何想法吗？
2 个解决方案
解决方案1
0 2011-04-15 03:28:43
- 在第一次 mouseup 之后，您创建 selectionImage HTMLElement 并且它只有一个单击事件。
- 单击带有 parent = 第一个标签的 selectionImage 调用单击事件并删除第一个标签。
- 在第二次 mouseup 之后，您创建另一个绑定到 selectionImage 的单击事件。
- 单击您在第一步中创建的 selectionImage 调用第一次单击事件，父级不存在（第 2 步中删除的第一个标签），因此它没有值“parentNode”。 并且处理停止。
主要问题是您在文档上的每个 mouseup 上创建新的单击事件。 这些点击事件有不同的父级并按顺序执行。
解决方案2
0 2011-04-15 04:04:28
一键点击事件，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
});
};
});
jQuery验证后，OnClick不起作用
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.