动态添加 Jquery ui 按钮
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/4351813/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Add Jquery ui button dynamically
提问by Kut
I have a javascript function that removes the existing buttons and adds new ones instead.
我有一个 javascript 函数，可以删除现有按钮并添加新按钮。
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:
有没有办法动态添加jquery ui按钮：
like:
喜欢：
divName.add("button");
divName.add("button");
It did not work...
这没用...
回答by Richard
To add a jQuery UI button using jQuery:
使用 jQuery 添加 jQuery UI 按钮：
$('#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
回答by hellodally
Pretty sure you can buttonize any input with jQuery-UI by calling button()
很确定您可以通过调用使用 jQuery-UI 按钮化任何输入 button()
var element = document.createElement("input").button();
回答by Mr. EZEKIEL
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.
我刚刚使用以下代码动态创建了一个按钮。关键部分是 .button() 部分，它似乎对我有用。
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");
回答by user3447136
This code worked for me
这段代码对我有用
$('#selector').append('<input type="button" value="My button">');
$('#selector').append('<input type="button" value="My button">');
$('#selector').click(function(){ alert('I was clicked!');});
$('#selector').click(function(){ alert('I was clicked!');});
回答by joe conery
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.
我认为@Stony 很接近，除了.button()和.click()方法被添加到原始选择器元素，而不是实际按钮。您应该为按钮创建一个 id，然后选择该按钮并调用button().click()它。
This is probably causing some kind of exception with the call to button()as commented under that post.
这可能会导致某种异常，button()如该帖子下所评论的那样调用。
回答by Lab Tipp
I applied from @Stony and it worked for me.
我从@Stony 申请，它对我有用。
function addMyButton(btID){
var temp = "<button id='" + btID + "'>My Button</button>";
$( "#selector" ).html(temp);
$( "#" + btID )
.button()
.click(function(){
alert( "I was clicked!");
});
}
回答by Jamie
Ninja UIworks this way by default, without hacking in HTML that gets overridden.
默认情况下，Ninja UI 以这种方式工作，无需修改被覆盖的 HTML。
You can create the button as a variable before the DOM is even ready.
您可以在 DOM 准备就绪之前将按钮创建为变量。
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.
当 DOM 准备好后，将按钮添加到您想要的任何位置。
$('body').append($button);
