使用 Jquery 动态创建按钮

Posted 2023-03-05

【中文标题】使用 Jquery 动态创建按钮

【英文标题】：Dynamically create buttons with Jquery

【发布时间】：2012-02-14 17:42:13

【问题描述】：

我需要使用 Jquery 动态创建 10 个按钮并将其上的文本设置为 1 -10，并为所有按钮添加相同的点击事件。

我应该使用 dom create element 还是其他？

【参考方案1】：

下面是显示按钮并调用您自己的函数并将按钮编号作为参数传递的示例。

for(i = 1; i <=10; i++) 

            $('<div class = "dynmic-buttons">')
            .append($('<button/>', 
                    text:i,
                    id:'dyn-btn'+i,
                    click: function ()  DYNFUNC.dynBtnClicked($(this).text());  
                    ))
                    .appendTo($('#dynamic-btn-container'));

这里是按钮点击的功能，显示各个按钮的文本

;DYNFUNC =         dynBtnClicked (data) 
                alert('Clicked dynamic button no:'+data);       
        

【参考方案2】：

试试这个：

var something = $('<input/>').attr( type: 'button', name:'btn1', value:'a button' );

现在将其附加到您的 div 中（在本例中，它的 id 为“item”）：

$("#item").append(something);

当然，对于动态值，您需要在循环中使用按钮的名称或 ID 字段的迭代值进行操作。

希望解释这个概念有帮助:)

【讨论】：

我已经调整了这个解决方案，以便在我的 html 表格的其中一列中添加按钮，我也在其中动态添加行。如何将ids 添加到按钮中，以便一行中的每个按钮都有唯一的id？

其中一个选项是将行号添加到 id。这样您就可以使用该 id 和结果按钮 id 访问行。

有没有办法可以添加图片，例如.attr() 属性中的工具图标，以便它出现在按钮上？

【参考方案3】：

我创造了这个小家伙。认为个别功能是矫枉过正，但这就是问题所要求的（我认为）：

https://jsfiddle.net/mmv1219/koqpzrar/1/

html:

<button type="button" id="Delta1">Blast Off!</button>
<div id="insertHere"></div>

javascript：

$('#Delta1').click(function () 
    var functions = ['btn1()', 'btn2()', 'btn3()', 'btn4()', 'btn5()', 'btn6()', 'btn7()', 'btn8()', 'btn9()', 'btn10()'];
    var div = document.getElementById('insertHere');
    var ctr = 1;
    for (var i in functions) 

        var btn = document.createElement('button');
        var txt = document.createTextNode(String(ctr));

        btn.appendChild(txt);
        btn.setAttribute('type', 'button');
        btn.setAttribute('onclick', functions[i]);
        btn.setAttribute('id', 'button' + ctr);
        div.appendChild(btn);
        ctr++;
    
);

function btn1() alert('button 1');    
function btn2() alert('button 2');    
function btn3() alert('button 3');
function btn4() alert('button 4');
function btn5() alert('button 5');
function btn6() alert('button 6');
function btn7() alert('button 7');
function btn8() alert('button 8');
function btn9() alert('button 9');
function btn10() alert('button 10');

【参考方案4】：

$(document).ready(function() for(i = 1; i <=10; i++) $('<button/>', text: i, //set text 1 to 10 id: 'btn_'+i, click: function () alert('hi'); ); );

希望对你有帮助

【讨论】：

哦，我喜欢这个。 +1。但是，这假设所有按钮都执行相同的功能。您现在还需要调用一个函数来测试 id 并调用另一个我认为的函数

$('<button />', ) 语法非常简洁，以前从未见过。

很遗憾，我无法让它显示任何按钮。

@KingstonFortune 是的，它不显示任何按钮。它只是执行所要求的操作，即创建按钮，设置文本，然后将点击事件添加到所有按钮。除此之外，您还需要使用append() 来显示它。

@UmairAhmed 是的，请查看此部分jQuery Create Element

【参考方案5】：

请参阅此处了解如何使用 jQuery What is the most efficient way to create HTML elements using jQuery? 创建元素

此外，一旦您创建了元素，要附加事件，您需要使用 Live() 关键字。

$("#btn1").live("click", function() 
//Do work
 );

【讨论】：

live 自 jQuery 1.7 起已弃用，不推荐在 1.4.2 起使用。对于 1.7+ 推荐使用 delegate 或 on，对于 1.4.2+ 推荐使用 delegate。