onclick handler added with jQuery doesn't work after first usage
I want to modify selected text by clicking the button that appears after text has been selected. At first iteration it works fine - the text is replaced as needed. At the second iteration it seems that the text is left from the previous iteration (pattern isn't updated) and nothing works. Can you please help to fix it. The demo is below.
I tried to do live('click', function ...) instead of click() to have the pattern updated according to some threads here but it seems to be not working.
EDIT:
decided to include the entire demo so that to make it clearer:
<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(!sel开发者_StackOverflow社区ectionImage) {
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>
Any ideas?
- After first mouseup you create selectionImage HTMLElement and it has only one click event.
- Clicking on selectionImage call click event with parent = first label and delete first label.
- After second mouseup you creates another click event which binds to selectionImage.
- Clicking on selectionImage call first click event, which you created in first step, parent isn't exist (first label deleted on step 2), so it hasn't value 'parentNode'. And processing stops.
The main problem is that you creates new click event on each mouseup on document. These click events have different parents and executes in order.
One click event, vars pass to selectionImage through jquery method data()
$(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
});
};
});
加载中,请稍侯......
精彩评论