6

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...

2
  • @a-dilla: THe button does not appear with that statement. Atleast a blank button or a sign of it must appear...
    – Kut
    Dec 4, 2010 at 3:58
  • @a-dilla: The same problem.. get a normal button
    – Kut
    Dec 4, 2010 at 4:36

7 Answers 7

19

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
2
2

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

var element = document.createElement("input").button();
2
  • maybe instead of the remove() you should call replaceWith("whatever-you-what-your-button-to-be").button()
    – hellodally
    Dec 4, 2010 at 4:22
  • 1
    this get me a: Uncaught TypeError: Object #<HTMLButtonElement> has no method 'button' Oct 3, 2013 at 22:39
2

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");
1

This code worked for me

$('#selector').append('<input type="button" value="My button">');

$('#selector').click(function(){ alert('I was clicked!');});

1
  • I like this answer because it only uses jQuery and not jQuery UI
    – Orbitus007
    Dec 10, 2014 at 22:58
1

I think @Stony was close, except the .button() and .click() methods were being added to the original selector element, not the actual button. You should create an id for the button then select that button and call button().click() on that.

This is probably causing some kind of exception with the call to button() as commented under that post.

0

Ninja UI works this way by default, without hacking in HTML that gets overridden.

You can create the button as a variable before the DOM is even ready.

var $button = $.ninja.button({
  html: 'Post Your Answer'
}).select(function () {
  // Your action here.
});

When the DOM is ready, append wherever you'd like the button to go.

$('body').append($button);
0

I applied from @Stony and it worked for me.

function addMyButton(btID){
    var temp = "<button id='" + btID + "'>My Button</button>";
    $( "#selector" ).html(temp);
    $( "#" + btID )
        .button()
        .click(function(){
            alert( "I was clicked!");
        });
}
0

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.