只有一个动态生成的链接是可点击的答案

【问题标题】：Only one dynamically generated link is clickable只有一个动态生成的链接是可点击的
【发布时间】：2017-09-22 19:04:49
【问题描述】：

我的页面上有动态生成的链接。我想要的是当我单击任何链接时，应该使用 jquery 加载另一个页面。现在发生的情况是，只有第一个链接会加载所需的页面，而其他链接不可点击。如何调整下面的代码，以便所有链接在单击时都将加载页面？

HTML

<div id="msg"></div>
<td style='text-align:center'>
 <a href='#' id='sub_add'><button class='btn btn-default'>Add</button></a>
</td>

jQuery

$('#sub_add').click(function(){
    $('#msg').load('another_page.php');
});

【问题讨论】：

您的代码中只有一个链接，因此只有第一个链接有效，因为没有其他链接。
我猜你在复制 ID。 ID 必须是唯一的
为什么不直接使用它的原意？
@Maantje OP 正在使用 .load() 作为 ajax 请求。
请提供更多示例 html。您提供的示例无法复制您的问题

标签： jquery html

【解决方案1】：

你应该实现这样的东西（假设接下来的两个 div.msg 元素是动态创建的）：

<div class="msg msg-1"></div>
<td style="text-align:center">
  <a href="#" class="sub_add" data-mgsid="1" data-page="another_page.php"><button class="btn btn-default">Add</button></a>
</td>

<div class="msg msg-2"></div>
<td style="text-align:center">
  <a href="#" class="sub_add" data-mgsid="2" data-page="another_page_2.php"><button class="btn btn-default">Add</button></a>
</td>

还有 jQuery：

$(document).on("click", ".sub_add", function(){
  $("msg-"+$(this).data("msgid")).load($(this).data("page"));
});

【讨论】：