When I replaceWith
an element to bring one out of the DOM, then replaceWith
it back in, events registered to it do not fire. I need to events to remain intact.
Here's my Javascript:
var replacement = $(document.createElement('span'));
var original = $(this).replaceWith(replacement);
replacement
.css('background-color', 'green')
.text('replacement for ' + $(this).text())
.click(function() {
replacement.replaceWith(original);
});
Live demo
In the demo, when you click an element, it is replaced with another element using replaceWith
. When you click the new element, that is replaced with the original element using replaceWith
. However, the click handler does not work any more (where I would think it should).
Because when you replace the original element, events bound to it are removed. You'll need to re-attach the click
event handler on original
after the call to replacement.replaceWith(original)
:
$(function()
{
function replace()
{
var replacement = $(document.createElement('span'));
var original = $(this).replaceWith(replacement);
replacement
.css('background-color', 'green')
.text('replacement for ' + $(this).text())
.click(function()
{
replacement.replaceWith(original);
original.click(replace);
});
}
$('.x').click(replace);
});
UPDATE: live()
and bind()
have been deprecated, in favour of on()
.
You can use live() and bind() events, this is your new code:
$(function() {
$('.x').live('click', function() {
var replacement = $(document.createElement('span'));
var original = $(this).replaceWith(replacement);
replacement
.css('background-color', 'green')
.text('replacement for ' + $(this).text())
.bind('click', function() {
replacement.replaceWith(original);
});
});
});
-Live event works with jQuery 1.3 and upper.
-if you want to stop the live propagation use die() function.
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With