Ajouter un bouton Jquery ui dynamiquement

Question

J'ai une fonction javascript qui supprime les boutons existants et en ajoute de nouveaux à la place.

Voici le 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); 
} 

Est-il possible d'ajouter un bouton ui jquery dynamiquement:

comme:

divName.add("button");

Il n'a pas fonctionné ...

Answer 1

Assurez-vous que vous pouvez utiliser n'importe quelle entrée avec jQu Ery-UI en appelant button()

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

Answer 2

Pour ajouter un bouton jQuery UI en utilisant 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 3

Ninja UI fonctionne de cette façon par défaut, sans le piratage en HTML qui obtient surchargée.

Vous pouvez créer le bouton en tant que variable avant même que le DOM soit prêt.

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

Lorsque le DOM est prêt, ajoutez l'endroit où vous souhaitez placer le bouton.

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

Answer 4

Je viens de créer dynamiquement un bouton avec le code suivant. La partie clé est la partie .button(), et cela semble fonctionner pour moi.

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

Answer 5

Ce code a fonctionné pour moi

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

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

Answer 6

Je pense que @Stony était proche, à l'exception des méthodes .button() et .click() ont été ajoutés à l'élément de sélection d'origine, et non la bouton actuel. Vous devez créer un identifiant pour le bouton, puis sélectionnez ce bouton et appelez button().click() à ce sujet.

Cela provoque probablement une sorte d'exception avec l'appel à button() comme commenté sous ce message.

Answer 7

J'ai appliqué à partir de @Stony et cela a fonctionné pour moi.

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