Ajax JQuery:单击动态创建的元素不起作用

Question

有一个Ajax请求，该请求在静态类中创建所有元素。

但是，我无法让下面的 JQuery 来拾取创建的按钮，即无法触发测试警报消息。

我已经查看了该站点上有关点击事件的许多帖子，但我无法让我的代码正常工作。

JQuery 和 html 元素如下所示。

点击时代码：

$(".content").on("click",".like",function()

Html(多个类"post"仅创建如下所示的单个示例(：

<div class="content"> //Static
<div class="post">
<div class="post-text">Some text goes here</div>
<div class="post-action">
<input type="button" value="Like" id="like_1_m5s9hr9vfef3ne6ubb533kqhr1" class="like">
<span id="likes_1_m5s9hr9vfef3ne6ubb533kqhr1">12</span> //id correctly starts with likes not Like
</div>
</div>
</div>

Answer 1

为什么不使用javascript而不是jQuery呢？

<input type="button" value="Like" id="like_1_m5s9hr9vfef3ne6ubb533kqhr1" class="like" onclick="youfunctionname('like_1_m5s9hr9vfef3ne6ubb533kqhr1');">

在生成动态内容时，在将元素附加到 html 中之前，您可以更轻松地直接编写 onclick。 此外，您可以在onclick中修改函数的调用(例如：传递id，或与执行其他操作相关的任何其他有用数据(。

Answer 2

你只需要使用 $(this(，这样你就可以确定你点击了哪个 .like 类。

下面的示例

$(".content").on("click",".like",function(){
var id = $(this).attr("id"); // get value of id
alert(id); // alert value
$(this).css("color","red"); // change color
});