动态创建唯一的按钮

Create unique buttons dynamically

本文关键字：按钮 唯一 创建 动态      更新时间：2023-09-26

我是jQuery的新手，我正在尝试动态地创建jQuery UI按钮并将它们添加到列表中。我可以创建一个列表项，但不能在它之后添加更多。我做错了什么?

$('#buttonList').append('<li><button>'+ username + '</button>')
       .button()
       .data('type', userType)
       .click(function(e) { alert($(this).data('type')); })
.append('<button>Edit</button></li>');
<div>
    <ul id="buttonList">    
    </ul>
</div>

这只创建了一个带有两个按钮的列表项(尽管第二个按钮似乎被第一个按钮包围了，但我可能会弄清楚这个问题)。我如何让它创建多个列表项目与自己独特的"数据"值(即我不能做一个find()上的特定按钮类，并给它的数据值，因为所有按钮将有相同的数据)?

我建议交换一下追加内容的位置和追加内容的位置。通过这种方式，您保留了附加的对象，并且应该能够将其作为标准的jQuery选择器使用。从你的代码中，我注释掉了.button()和.append()行，因为我不确定你想用它们做什么。如果您需要帮助添加这些行，只需在我的回答下留言;)

哦，我差点忘了:我使用var i来模拟username和userType数据的不同内容。

您的JSFiddle在这里:http://jsfiddle.net/cRjh9/1/

示例代码(html部分): 
<div>
    <p id="addButton">add button</p>
    <ul id="buttonList">
    </ul>
</div>
示例代码(js部分): 
var i = 0;
$('#addButton').on('click', function()
{
  $('<li><button class="itemButton">'+ 'username' + i + '</button></li>').appendTo('#buttonList')
  //.button()
  .find('.itemButton')
  .data('type', 'userType'+i)
  .click(function(e) { alert($(this).data('type')); 
                     })
  //.append('<button>Edit</button></li>')
  ;
  i++;
});

在方法参数中包装任何html时需要完整的标记。你不能把DOM当作一个文本编辑器，附加一个开始标签，附加更多的标签，然后附加结束标签。

插入到DOM中的任何内容都必须是完整且有效的html。

您也不理解从append()返回的内容的上下文。它不是参数中的元素，而是要附加到的元素集合。您正在呼叫整个<UL>的button()。

我建议你在尝试将这么多方法链接在一起之前更好地理解jQuery

只是一个非常简单的方法，你可以修改- FIDDLE。

我没有添加数据属性，也没有单击功能(我不确定我是否喜欢内联的"点击"函数——我通常用jQuery来做，并试着弄清楚如何做代码高效。可能不是很理性，但我经常这样。

JS 

var names = ['Washington', 'Adams', 'Jefferson', 'Lincoln', 'Roosevelt'];
for( r=0; r < names.length; r++ )
   {
    $('#buttonList').append('<li><button>'+ names[r] + '</button></li>');
    }
$('#buttonList').append('<li><button>Edit</button></li>');
相关文章：