CODEWITHSUNDEEP
jqueryjquery-uidynamically-generated
Manish
Manish

Reputation: 1972

How to apply jqueryUI method on dynamically generated content

Does anyone can help me with applying jqueryUI method to dynamically generated content in my webapp. This content here is generated dynamically through an ajax call-:

<div class="streamOptionsContainer">
<button id="delete_post" title="Delete Post"></button>
</div>

problem is that when I use jqueryUI method:-

$("button[id=delete_post]").button();

on the dynamically generated button it doesn't work, while the above mentioned jqueryUI method is working for all static content.

Upvotes: 1

Views: 1476

Answers (3)

Mykhailo Hordiienko
Mykhailo Hordiienko

Reputation: 61

This problem may be caused by bootstrap (if you use it). Bootstrap rewrites $.fn.button with its own method. But this is fixed. Please look at the code from bootstrap.js

var old = $.fn.button

$.fn.button = function (option) {
 return this.each(function () {
   var $this = $(this)
     , data = $this.data('button')
     , options = typeof option == 'object' && option
   if (!data) $this.data('button', (data = new Button(this, options)))
   if (option == 'toggle') data.toggle()
   else if (option) data.setState(option)
 })
}

...

$.fn.button.noConflict = function () {
  $.fn.button = old
  return this
}

So we need to write $.fn.button.noConflict(); to make jQuery Ui Button available via calling .button() on element.

Upvotes: 1

BuzzzHost.com
BuzzzHost.com

Reputation: 82

Try using:

$('#delete_post').button();

Upvotes: 0

Praveen Kumar Purushothaman
Praveen Kumar Purushothaman

Reputation: 167210

Use .on() method.

$("button[id=delete_post]").on("load", function(){
    $(this).button();
});

Since you are using an ID, you can do this way:

$("#delete_post").on("load", function(){
    $(this).button();
});

Also, if you are loading it after an ajax call, you can use the success: function in it.

$.ajax({
    success: function(){
        $("#delete_post").button();
    }
});

Correct my syntax if wrong. :)

Upvotes: 3

Related Questions