如何在 Javascript 中将按钮与新对象（对象嵌套）相关联答案

【问题标题】：How to associate buttons with new objects (object nesting) in Javascript如何在 Javascript 中将按钮与新对象（对象嵌套）相关联
【发布时间】：2016-10-26 00:41:33
【问题描述】：

所以我需要类似于 Facebook Messenger 的齿轮按钮的东西，只有当对话框悬停或当前处于活动状态时才能看到（只是为这些词提供图像），但我如何将按钮与该对象相关联？对象嵌套真的让我很困惑。这就是我现在的样子。

table_data {

    item_1: { fruits: [ {}, ..., {} ]},
    item_2: { fruits: [ {}, ..., {} ]},
    ...
    ...
    item_n: { fruits: [ {}, ..., {} ]},
}

每个item 都是一个div，有3 个按钮：

删除 - 删除项目和所有内容
选项 - 打开弹出选项菜单
扩展 - 扩展当前 item 以显示 fruits 对象数组

用户输入一个新的item，然后可以选择将对象添加到fruits 数组。

document.getElementById("save").addEventListener("click", function() {
    table_data[newItem] = { fruits:[] };
    appendHTML(newItem);
    // helper function that appends HTML
}

所以在选项下，用户可以“添加水果”。我如何才能将“添加水果”关联到正确的项目，因为“选项”按钮只是附加了 HTML。

如果有帮助，辅助函数如下所示。

function appendHTML(item) {
   $("#list").append('<li class="enter"><div class="listContent"><a href="#" class="close"></a><span class="itemName">'+item+'</span></a><a href="#" id="expand"></a><a href="#" id="gear"></a></div></li>');

}

如果将来有人碰巧需要这个问题的答案......

$(document).on('click', "#list > li > .listContent > .gear", function() {
    $(this).next().slideToggle();
});

【问题讨论】：

标签： javascript jquery html arrays object

【解决方案1】：

这是this question 的副本。在那里，你会找到多个答案。我认为最好的方法可能是将元素存储在 var 中，然后您可以轻松地在附加后使用任何您想要的目标

【讨论】：

您知道为什么这些按钮可能不起作用吗？我有一个附加了 id="gear" 的齿轮图标。为什么只有 HTML 文件中实际存在的一个有效，而附加的其他无效？
所有按钮都有 id="gear" 吗？如果id 有多个实例，我建议使用类而不是 id
我使用了 id 所以我可以做 document.getElementById("gear").addEventListener("click", function(){...});现在阅读有关附加按钮的其他问题，只是想知道您是否碰巧有一个简单易懂的答案
我的建议是让它们不起作用，因为document.getElementById("gear") 将针对第一个，而不是全部。我想你需要给它们类，然后使用 JS 或 jQuery 来选择它们，比如$('.gear')
这是真的！所以我有这个解决方案：$('body').on('click', '#gear', function() { $("#gearOptions").slideToggle("slow"); }); 该按钮有效.. 但它切换了错误的#gearOptions，我将如何找到与单击的#gear 对应的那个？