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

@a-dilla: THe button does not appear with that statement. Atleast a blank button or a sign of it must appear... — Kut
– Kut, Commented Dec 4, 2010 at 3:58

Richard · Accepted Answer · 2014-11-19 07:15:11Z

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

edited Nov 19, 2014 at 7:15

answered Apr 11, 2011 at 16:56

Richard

4,8304 gold badges36 silver badges39 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Yu Shen Over a year ago

With jQuery at "ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js" .button() should not be used. Removing it, it worked.

Richard Over a year ago

Hmm, .button() comes from jQuery UI, not jQuery core, so not sure what is responsible for the difference you are seeing.

hellodally · Accepted Answer · 2010-12-04 03:54:07Z

2

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

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

answered Dec 4, 2010 at 3:54

hellodally

2851 silver badge9 bronze badges

2 Comments

hellodally Over a year ago

maybe instead of the remove() you should call replaceWith("whatever-you-what-your-button-to-be").button()

Josep Valls Over a year ago

this get me a: Uncaught TypeError: Object #<HTMLButtonElement> has no method 'button'

Mr. EZEKIEL · Accepted Answer · 2014-01-20 00:11:35Z

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

answered Jan 20, 2014 at 0:11

Mr. EZEKIEL

4,4443 gold badges16 silver badges9 bronze badges

Comments

Starscream1984 · Accepted Answer · 2014-04-02 16:12:43Z

1

This code worked for me

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

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

edited Apr 2, 2014 at 16:12

Starscream1984

3,0621 gold badge21 silver badges27 bronze badges

answered Apr 2, 2014 at 15:51

user3447136

1511 silver badge3 bronze badges

1 Comment

Orbitus007 Over a year ago

I like this answer because it only uses jQuery and not jQuery UI

honk · Accepted Answer · 2014-11-18 20:01:06Z

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.

edited Nov 18, 2014 at 20:01

honk

9,87311 gold badges83 silver badges90 bronze badges

answered Nov 18, 2014 at 19:09

joe conery

111 bronze badge

Comments

Jamie · Accepted Answer · 2012-01-07 04:14:28Z

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

answered Jan 7, 2012 at 4:14

Jamie

5074 silver badges8 bronze badges

Comments

Lab Tipp · Accepted Answer · 2016-04-04 06:40:10Z

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!");
        });
}

answered Apr 4, 2016 at 6:40

Lab Tipp

111 bronze badge

Collectives™ on Stack Overflow

Add Jquery ui button dynamically

7 Answers 7

2 Comments

2 Comments

Comments

1 Comment

Comments

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

7 Answers 7

2 Comments

2 Comments

Comments

1 Comment

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related