tags:

views:

30

answers:

1

Hi All,

I have a html page using a jQuery UI Button with some jQuery script like this:

<script type="text/javascript">
 $('button).button(); // sets up the jQuery UI button style
 $('#btnClose').live('click',function () {
   $.get('content.html', function (data) {
     $('#EditCategory').html(data);
   });
 });
</script>

<html>
  <button type="button" id="btnClose'">Close</button>
  <div id="EditCategory" class="category"></div>
</html>

On the content.html page I have:

<button type="button" id="btnNewCategory">Add new category</button>

When I click on '#btnClose' the content.html is returned and the button is displayed but the jquery ui css styling is lost. Is this because the css style is applied before the DOM is reconstructed? If so, is there anything I can do like using .live() to ensure the CSS gets applied?

Thanks for the help!

+1  A: 

You'll need to apply the button styling to that content after you've inserted it:

$('#btnClose').live('click', function() {
  $.get('content.html', function(data) {
    $('#EditCategory').html(data);

    $('#EditCategory button').button();
  }
});

Unfortunately, there isn't a .live() analog for applying plugins. The technique it uses is only useful for catching and handling events.

Dave Ward
Thanks Dave that did the job !
Click Ahead