javascript - JQuery - 设置为按钮的数据是相同的

Question

我有一些 JSON 数据。我现在正在尝试插入一个表行。此行插入正常。

问题是我想将数据 append 到每个按钮。

不幸的是，每一个都设置了相同的数据。因此输入的每个按钮都应该有一个包含 1-无穷大 ID 的数据。

这是我 append 所有项目的 for 循环。

$("#market-table > tbody")
                        .append($('<tr class="row100 body">')
                            .append($('<td class="cell100 column1">')
                              .append(data.company.companyName)
                              .append('<span class='+changeClass+'>'+data.company.priceChange+'</span>')
                            )
                            .append($('<td class="cell100 column2">')
                              .append(data.company.marketType)
                            )
                            .append($('<td class="cell100 column3">')
                              .append(data.company.sharePrice)
                            )
                            .append($('<td class="cell100 column-actions">')
                             .append('<a href="#" class="market-action-button buy">Buy</a>')
                             )
                            .append($('<td class="cell100 column4">')
                              .append(data.company.sharesAvailable)
                            )
                        )
                        .find('.market-action-button').data("company-data", data);
                     }

这是点击监听器:

$(document).on('click','.market-action-button.buy',function() {
        marketData = ($(this).data("company-data"));
        console.log(marketData.company.id);

每次都会打印相同的 Id。

这与.find()有关吗？

Answer 1

不要像这样添加公司数据:

 .find('.market-action-button').data("company-data", data); 

在生成按钮项时添加它，您将使用循环的最后一次调用来覆盖它，因为您获得了表中的所有按钮。变化:

.append('<a href="#" class="market-action-button buy">Buy</a>')

对于

.append('<a href="#" class="market-action-button buy" data-company-data="'+data+'">Buy</a>')