gpt4 book ai didi

JQuery .load() 使内容在加载后不可点击

转载 作者:行者123 更新时间:2023-12-01 07:26:46 29 4
gpt4 key购买 nike

我有一个页面,其中有一个 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});

});

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

<td>'.$task[$i]['name'].'</td>
<td>'.$task[$i]['description'].'</td>
<td><input type="button" class="newtask" name="accept_new_task" id="task_'.$task[$i]['task_id'].'" value="'.$task[$i]['task_id'].'"></td>

如有任何帮助,我们将不胜感激。

最佳答案

jQuery .click 事件不是实时事件,因此它只会使已分配给它的项目可单击。一旦这些项目被刷新、删除或新项目进入,刷新的项目将不会有点击事件,新项目将不会有点击事件。

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

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

关于JQuery .load() 使内容在加载后不可点击,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/9009364/

29 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com