jQuery replaced div stops responding to mouseclick

I am trying to replace a value in a drop down box. The replacing works fine (after help from this fine community) but afterwards the slide function stops working. I can't find any errors so I'm asking if this could be related to how jQuery and javaScript works? Are elements "mapped" to the DOM on load and if so; would that imply that replacing a div with another div would result in jQuery loosing track of the divs?

I use this code to check if a div is clicked:

$(document).ready(function () {

    $('.button_slide').click(function () {
        var num = $(this).attr('rel');
        $('div.content_slide:not(.' + num + ') ').slideUp(400);
        $('div.' + num).slideToggle(400);
    });
    return false;
});

This is the div:

<div class="button_slide" rel="slide1">Alts:</div>
<div class="content_slide slide1">
  <input id="Button1" rel="slide1" class="button_vertical click_button" type="button" value="2" size="10px" />
  <input id="Button2" rel="slide1" class="button_vertical click_button" type="button" value="3" />                                                    
</div>

This is the jQuery that drops down the box:

        $(function () {

            $('.click_button').click(function () {

                var num = $(this).attr('rel');

                $('.button_slide[rel="' + num + '"]').replaceWith("<div class='button_slide' rel='" + num + 开发者_StackOverflow"' >" + $(this).val() + "</div>");
                $('div.content_slide').slideUp(600);
            });
        });

I'm pulling my hair on this one and jQuery isn't my stronger side... How would you solve this?

The click function adds a handler to the element(s) currently in the jQuery object.
The new replacement element doesn't have any handlers.

You need to call .live, which will add a handler to all elements that match a selector, whenever they were created.

For example:

$('.click_button').live('click', function() {
    ...
});

jQuery bind calls (e.g. click) bind to particular elements. If you replace one such element, any handlers bound to it will be removed.

The easiest way around this is to use the delegate syntax. This uses a Javascript feature called event bubbling, which means that events further up the DOM tree are also notified of an event on a child element. This allows you to bind to a parent element (e.g. document.body or a nearer common ancestor, depending on your HTML) and wait for events on the child element there:

$(document).ready(function () {
    $(document.body).delegate('.button_slide','click', function () {
        var num = $(this).attr('rel');
        $('div.content_slide:not(.' + num + ') ').slideUp(400);
        $('div.' + num).slideToggle(400);
    });
    return false;
});

Try this:

$('.click_button').live('click', function() {
   ... your code... 
});

Delegate is better but since you say jQuery isn't your strong side, we won't go there for now :)

Basically what is happening is the new DIVs don't exist at the time you bind your event handler. Live() binds the event handler for all present and future divs by binding a single event handler to the document and searching for matches at the time of the event.

Hope this helps.