动态创建独特的按钮答案

【问题标题】：Create unique buttons dynamically动态创建独特的按钮
【发布时间】：2014-07-06 17:19:13
【问题描述】：

我是 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() 并为其提供数据值，因为所有按钮都将具有相同的数据）？

【问题讨论】：

是整个代码还是sn-p？用户名/用户类型变量从何而来？
抱歉，这不是整个脚本，因为还有其他代码部分，我不确定它们是否相关。变量存在并且工作正常，只是只创建了一个列表项。
好吧，您只执行该代码一次。您需要遍历您的用户名/用户类型列表并多次调用您拥有的代码（每个用户名/用户类型集一次）。我不知道您是否已经尝试这样做，因为这是部分代码。
此代码位于一个函数中，当单击另一个按钮时会调用该函数。如果我添加一个警报，它每次都会显示，所以我确信每次单击按钮时代码都会运行。
这可能更符合您希望实现的目标。请注意我是如何从内部开始并制定出jsfiddle.net/ZT7bp

标签： javascript jquery html jquery-ui

【解决方案1】：

我建议交换您要附加的位置和要附加的位置。这样，您可以保留附加的对象，并且应该能够将其用作标准的 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++;

});

【讨论】：

您仍然有点误导 OP，因为事件将绑定到 <LI> 而不是按钮
为 charlietfl 评论添加了 +1，因为它几乎是正确的，即使考虑到链中的一点 find() 可以帮助返回按钮而不是 li :)
谢谢，我可以修改此代码以实际返回 li 中的按钮，但其他一切似乎都很好。
修改了代码，如果其他人有同样的问题，他们会看到正确的代码:)

【解决方案2】：

当您将任何 html 包装在方法参数中时，您需要完整的标签。您不能将 DOM 视为文本编辑器并附加一个开始标签，附加一些标签，然后附加结束标签。

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

您也不了解append() 返回的内容的上下文。它不是参数中的元素，而是您要附加到的元素集合。你打电话给button() 整个<UL>。

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

【讨论】：

感谢您的解释。我不想链接，但我不确定如何获取已创建按钮的最新实例。如果有避免链接的方法，我很乐意使用该方法。
@TryNCode 我建议你先学习如何使用 html 字符串来完成所有这些工作。它真的没有太多代码，data- 可以内联。插入后添加事件处理程序/插件
他可以使用链接。但是，正如 charlietfl 指出的那样，OP 应该了解 jQuery 函数的作用以及它返回的内容。事实上，在我的回答中，我几乎保留了他的所有代码，但使用附加元素作为链的选择器:)
$('#buttonList').append('<li><button>'+ username + '</button></li>') 对我来说似乎工作正常，并且添加了多个列表项。问题是试图将这些按钮变成 jQuery-UI 按钮。
@TryNCode 最后可以简单地做$('#buttonList button').button()

【解决方案3】：

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

我没有添加数据属性，也没有添加点击功能（我不确定我是否喜欢内联“点击”函数 - 我通常在 jQuery 中执行它们并尝试弄清楚如何制作代码高效。可能不是很理性，但我经常如此）。

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

【讨论】：