Add Jquery ui button dynamically

Question

I have a javascript function that removes the existing buttons and adds new ones instead.

Here is the code:

 function FunctionName(){
     ("button").remove();
     // This works fine.
     //but however, with the following add code, I don;t get a jquery ui button.
     var element  = document.createElement("input");
     element.setAttribute("type","button");
     // other code
     divName = get <div> by ID;
     divName.appendChiled(element);
 }

Is there any way to add a jquery ui button dynamically:

like:

divName.add("button");

It did not work...

Answer 1

To add a jQuery UI button using jQuery:

$('#selector') // Replace this selector with one suitable for you  
  .append('<input type="button" value="My button">') // Create the element  
  .button() // Ask jQuery UI to buttonize it  
  .click(function(){ alert('I was clicked!');}); // Add a click handler

Answer 2

Pretty sure you can buttonize any input with jQuery-UI by calling button()

var element = document.createElement("input").button();

Answer 3

I just created a button dynamically with the following code. The key part is the .button() part, and it seems to work good for me.

var self = this;
var exitButton = $(document.createElement("a"));
exitButton.attr({
    'href': '#',
    'id': 'exitSlideshowButton',
});
exitButton.click(function(event){
    event.preventDefault();
    self.exitSlideshow();
});
exitButton.text("Exit Slideshow Mode")
exitButton.button();
exitButton.appendTo("body");