Question

Firstly, I’m using jQuery UI for skinning my buttons. I have a form that has a button. This form consists of a varying amount of checkboxes. If I have a checkbox go away, one of the button’s methods is that on success of the checkbox removal, it .load()‘s the new set of checkboxes without page refresh.

Here’s the code:

$('#zoneRemove').live('click',function() {
        $.post('php/zoneNotifUnsub.php', $('#zoneNotifUnsub').serialize(), function(){
            $('#zoneDiv').load('notifications.php #zoneDiv');
         });
    });

It works great. The only problem is that when #zoneDiv reloads, it seems to return a different result, as my button is not skinned (the button is inside the div, placing it outside makes the entire thing not work). This typically is a symptom of a JS syntax error (as any error in my script causes button skinning to fail; this is a semi-useful bug/feature for debugging). However, I clearly do not change any JS code. The only thing that would change is the output of some PHP that is contained in #zoneDiv.

Any help?

Answer 1

This is because your button is being dynamically altered by JQuery UI. Just run .button() again on the elements inside that div (you can change .button to whatever function you need):

    $('#zoneDiv').load('notifications.php #zoneDiv', function(){$(this).find('.button').button();});

Whatever styling you do on that div on page load, you have to do it again.