gpt4 book ai didi

javascript - 动态创建独特的按钮

转载 作者:行者123 更新时间:2023-11-30 10:14:32 27 4
gpt4 key购买 nike

我是 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 来为 usernameuserType 数据模拟不同的内容。

这里有适合您的 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++;

});

关于javascript - 动态创建独特的按钮,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/24598347/

27 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com