Javascript 带有按钮的DataTable，将元素追加到列表

我正在使用jquery中的datatables插件，并在datatable中添加了一个按钮。按下按钮时，我想将元素标题添加到无序列表元素

下面是我的最低可行示例：

const结果={
“通用信息”：[{
“标题”：“标题1”，
“permalink”：“www.link.com”，
“制造商”：“制造商1”，
“img”：https://images-na.ssl-images-test.com/images/asdfIdR/5adf1vELadfZeiMML.jpg",
“curreny”：“$”，
“价格”：“64.00”，
“可用性”：“通常在24小时内发货”，
},
{
“标题”：“标题2”，
“permalink”：“www.link.com”，
“制造商”：“制造商2”，
“img”：https://images-na.ssl-images-test.com/images/I/51adfkLhadsfgACH0L.jpg",
“curreny”：“$”，
“价格”：“59.99”，
“可用性”：“通常在24小时内发货”，
}
]
}
//转换数据集
让数据集=results.generalInfo.map（（项，i）=>[
i+1，
`
`,
项目1.制造商，
`${item.currency}${item.price}`，
项目1.可用性，
`
添加
`,
`
购买
`
])
$（'#表_id'）。数据表({
数据：数据集，
摧毁：没错，
栏目：[{
标题：“#”
},
{
标题：“标题”
},
{
标题：“制造商”
},
{
标题：“价格”
},
{
标题：“可用性”
},
{
标题：“
},
{
标题：“
}
]
})
功能添加结果（项目）{
$（“ul”）.append（`li>${item.title}`）；
}

结果：

与其将项目绑定到您的内联JS处理程序（我真的不鼓励人们这么做，因为内联JS非常糟糕），您实际上想要的只是一个对

结果.generalInfo

数组的引用，以便您可以从中提取正确的项目

在这种情况下，这就足够了：

为按钮分配一个类，而不是ID（ID必须是唯一的），比如说

存储对相关项的不变引用。这与将索引存储在

数据-

属性中一样简单，例如

将单击事件处理程序绑定到该类

在单击事件处理程序中，从

数据项索引

中检索值，并将其用作键，以访问

结果.generalInfo

中找到的原始项。请记住，

data-

属性总是返回字符串，因此使用

+

操作将其强制转换为整数：

$('#table_id').on('click', 'button.addButton', function() {
  const itemIndex = +$(this).data('item-index');
  const item = results.generalInfo[itemIndex];
  $("ul").append(`<li>${item.title}</li>`);
});

$（'table_id'）。在（'click'，'button.addButton'，function（）上{
const itemIndex=+$（this）.data（'item-index'）；
const item=results.generalInfo[itemIndex]；
$（“ul”）.append（`li>${item.title}

`）； }); 请参阅下面的概念验证片段：

const结果={
“通用信息”：[{
“标题”：“标题1”，
“permalink”：“www.link.com”，
“制造商”：“制造商1”，
“img”：https://images-na.ssl-images-test.com/images/asdfIdR/5adf1vELadfZeiMML.jpg",
“curreny”：“$”，
“价格”：“64.00”，
“可用性”：“通常在24小时内发货”，
},
{
“标题”：“标题2”，
“permalink”：“www.link.com”，
“制造商”：“制造商2”，
“img”：https://images-na.ssl-images-test.com/images/I/51adfkLhadsfgACH0L.jpg",
“curreny”：“$”，
“价格”：“59.99”，
“可用性”：“通常在24小时内发货”，
}
]
}
//转换数据集
让数据集=results.generalInfo.map（（项，i）=>[
i+1，
`
`,
项目1.制造商，
`${item.currency}${item.price}`，
项目1.可用性，
`
添加
`,
`
购买
`
]);
$（'#table_id'）。在（'click'，'button.addButton'，function（）上{
const item=results.generalInfo[+$（this.data（'item-index'））；
$（“ul”）.append（`li>${item.title}`）；
});
$（'#表_id'）。数据表({
数据：数据集，
摧毁：没错，
栏目：[{
标题：“#”
},
{
标题：“标题”
},
{
标题：“制造商”
},
{
标题：“价格”
},
{
标题：“可用性”
},
{
标题：“
},
{
标题：“
}
]
});

结果：

答案请点击Thx！还有一种方法可以通过单击侦听器上的函数调用直接将整个项目传递给单击侦听器吗？@mrquad整个项目已经分配给单击处理程序中的
项目
常量。最后一个问题是，为什么要将单击侦听器放在表上，而不是直接放在按钮上。例如，
$（'#table_id'）
而不是
$（'.addButton'）
Thx，请提前发表评论@mrquad实际上是为了捕捉事件冒泡。由于已将按钮动态添加到表中，因此无法将单击事件直接绑定到按钮，因为它们在运行时不可用。相反，您可以将click事件绑定到表本身，并简单地检查click事件是否是从button元素冒泡出来的（因此是
.on（）
方法的第二个参数）。