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

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

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

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

使用ajax添加事件添加到元素？

1 个答案: