Question

I think this might be a passing the argument problem, but I’m still new to jQuery. I have two block elements that start out with a jQuery function re-styling one from the other. But when I use jQuery to replace the contents of those block elements with the same kind of code, the re-styling function no longer works.

This is the core of what I’m working with:

$(document).ready(function() {
    $('#baz').click(function() {
        $('#bar').replaceWith('<div id="bar">' + 'texttexttexttexttext' + '<span id="hl1" class="nohighlight">' + 'some other stuff to be highlighted' + '</span>' + 'texttexttexttext' + '</div>');
        $('#foo').replaceWith('<div id="foo"><span id="rollover1">' + 'Look at this!' + '</span></div>');
    });

    $('#rollover1').mouseenter(function() {
        $('#hl1').removeClass('nohighlight').addClass('highlight');
    });

    $('#rollover1').mouseleave(function() {
        $('#hl1').removeClass('highlight').addClass('nohighlight');
    });
});​

...

<div><a href="#" id="baz">change</a></div>
<div id="foo"><span id="rollover1">HEY!</span></div>
<div id="bar">blahblahblah<span id="hl1" class="nohighlight">blahblahblahblah</span>blahblahblah</div>​

See http://jsfiddle.net/xdP7Z/4/

Answer 1

You are dynamically changing the elements so you need to delegate

$(document).ready(function() {
    $('#baz').click(function() {
        $('#bar').replaceWith('<div id="bar">' + 'texttexttexttexttext' + '<span id="hl1" class="nohighlight">' + 'some other stuff to be highlighted' + '</span>' + 'texttexttexttext' + '</div>');
        $('#foo').replaceWith('<div id="foo"><span id="rollover1">' + 'Look at this!' + '</span></div>');
    });

    $('body').on('mouseenter','#rollover1', function() {
        $('#hl1').removeClass('nohighlight').addClass('highlight');
    });

    $('body').on('mouseleave','#rollover1',function() {
        $('#hl1').removeClass('highlight').addClass('nohighlight');
    });
});

FIDDLE

It’s best to delegate to the closest parent element existing in the dom, so you should replace body with a static parent element. By delegating you attach the event handler to a parent element – which then listens for the event to bubble up and handles the event.

I made my example using .on() because i saw you selected jQuery 1.8 but if you are using an older library – here’s how you should choose which method to use

$(selector).live(events, data, handler);                // jQuery 1.3+
$(document).delegate(selector, events, data, handler);  // jQuery 1.4.3+
$(document).on(events, selector, data, handler);        // jQuery 1.7+