将事件添加到使用 ajax 添加的元素?

Question

所以我遇到了这个小问题，我将从编写代码并解释我试图实现的目标开始。

这是我的jsp文件的一部分：

<form method="POST">
<input type="hidden" value="5" class="val" >
<input type="submit" class="button2"> 
</form>
<div id="result"></div>

我希望当我单击带有类名"button2"的按钮时，我在隐藏的输入中获取值并将其发送到我的 servlet。

我使用jQuery来做到这一点，这是我的javascript代码：

$(".button2").click(function(){
var val = $(".val").val()
$.ajax({
type:"POST",
url:"controllerServlet",
data:{val:val},
success:function(result){
$("#result").html(result)
}
})
// this method will be explained after
affectation()
})

现在，我在控制器中获取值并使用它来从数据库中获取数据并将我的数据存储在 ArrayList 中，然后再次将其发送到我的jsp页面，这是代码：

public class controllerServlet extends HttpServlet {
doPost(HttpServletRequest req, HttpServletResponse resp){
if(req.getParameter("val")!=null){
int val = Integer.parseInt(req.getParameter("val"));
// getUsersOfGroup return an ArrayList and this method works fine
ArrayList<User> users = new Service().getUsersOfGroup(val);
/* contentOfList is a method that return a String - it will be 
defined */
String result = Service.contentOfList(users);
out.print(users); 
}
}
}

我使用了 contentList 方法，因为我不知道如何发送 ArrayList 并使用 jquery 获取它。

这是我的类服务中方法的定义：

public static String contentList(ArrayList<User> users){
String data = "";
for(User user:users){
data += "<div class="res"><p class="name">"+user.getName()+"</p><button class="data">data</button></div>";
}
return data;
}

在我的检查员中，我可以看到到目前为止一切都很好，这就是我所看到的：

<form method="POST">
<input type="hidden" value="5" class="val" >
<input type="submit" class="button2"> 
</form>
<div id="result">
<div class="res">
<p class="name">Dominic</p><button class="data">data</button>
</div>
<div class="res">
<p class="name">Julien</p><button class="data">data</button>
</div>
<div class="res">
<p class="name">Yanick</p><button class="data">data</button>
</div>
</div>

现在我希望当我单击按钮数据时，所选用户的名称将显示在警报中，这是我的代码：

function affectation(){
var lg = $(".res").length
for(var i=0; i<lg; i++){
$(".res:eq("+i+")").find(".data").click(function(){
alert($(".res:eq("+i+")").find(".name").text())
})
}

但似乎我没有向添加的元素添加任何事件。

以及如何在不刷新页面的情况下将 ArrayList 从我的控制器发送到jsp？

任何帮助将不胜感激。

Answer 1

您应该在此处使用事件委派。由于结果容器已经存在，您可以在其上附加单击事件处理程序，目标元素将为您提供单击的按钮元素。

$('#result').on('click', 'button.data', (e) => {
const nameElement = $(e.target).siblings('.name');
alert(nameElement.text());
});

动态内容示例 - https://jsfiddle.net/56fe6cfs/1/