JQuery .load（）使内容在加载后无法点击

我有一个页面，我有一个div。 来自该div的内容由包含页面填充，并且包括页面正在调用数据库以检索内容。

当用户单击“添加任务”按钮时，会调用ajax将内容插入数据库，并使用.load（）刷新显示所有任务的div。 “删除任务”也会发生相同的过程; 进行另一个ajax调用，从数据库中删除一行，并使用.load（）刷新div。

我在数据库表中看到了插入和删除，但前端有点不稳定。 当页面首次加载时，我可以执行无限数量的“添加”操作，所有新任务都显示在div中。 但是，我只能做一个’删除’动作; 在第一次尝试之后，我似乎无法从div中选择一个元素。

这是’添加’代码：

$("#accept_new_task").click(function(){ jQuery.ajaxSetup({async: false}); //Make ajax call $.post("[url]", { [data] }, //If successful, add a new item to task list and clear input function(data) { //Clear input $("#new_task_name").val(''); $("#new_task_description").val(''); //Show new task $('#newly_added_tasks').load('[page on server]', function() { }); }); jQuery.ajaxSetup({async: true}); }); 

和’删除’代码：

 //Deletes recently added task $(".newtask").click(function(){ alert('!'); //to test var val = $(this).attr('value'); jQuery.ajaxSetup({async: false}); //Make ajax call $.post("[url]", { [data] }, //If successful, refresh div function(data) { $('#newly_added_tasks').load('[page on server]', function() { alert('Load was performed.'); }); }); jQuery.ajaxSetup({async: true}); }); 

正在加载的内容是使用从数据库调用中提取的内容生成的表。 这是一个片段：

 '.$task[$i]['name'].' '.$task[$i]['description'].'  

任何帮助，将不胜感激。

Answer 1

jQuery .click事件不是实时事件，因此它只会将已分配的项目设为可点击。 刷新，删除或新项目进入后，刷新的项目将不会有点击事件，新项目将不会有点击事件。

您将需要使用jQuery .on事件，它是.live事件的替代品。 这样，当内容刷新时，它们仍然会附加一个点击事件。

另一个选项是在内容刷新时分配click事件。

Answer 2

改变这一行

 $(".newtask").click(function(){ 

至

 $(document).on(".newtask","click",function(){ 

或使用代表

 $(document).delegate("click",".newtask",function(){ 

原因是动态添加的元素如果使用jQuery 1.7+其他使用delegate则不会将自己附加到事件处理程序on

Answer 3

它会适用于此

 $(document).on("click",".newtask",function(){ 

要么

 $(document).delegate(".newtask","click",function(){