这是有问题的页面:
http://www.lukaspleva.com/MoneyThink/NationalAdmin.php
如果您转到该页面,您会看到只需单击每行旁边的红十字按钮即可从系统中删除章节。当您这样做时,顶部的章节计数器会自动更新。
当您通过顶部的部分将新章节添加到混音中时,就会出现问题。新部分被添加并且计数器更新,但删除按钮停止工作。
查看代码发生的情况,似乎 .load() 函数正在页面上已经存在的表单 id="update_existing_chapters" 中创建了一个额外的表单="update_existing_chapters"。
基本上,它不只是刷新 div 或表单,而是在其中创建一个重复的副本,这会破坏代码。
相关的代码是:
$('form#update_existing_chapters')
.load('NationalAdmin.php form#update_existing_chapters');
知道为什么它要创建一个重复的元素/部分,而不仅仅是刷新当前的吗?
更新#1
我现在意识到我必须使用 .on() 来保留按钮的删除事件。我尝试了以下代码,但这实际上完全破坏了 AJAX。任何想法为什么?
<script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/1.8.0/jquery.min.js"></script>
<script type="text/javascript">
jQuery(document).ready(function() {
$('#current_chapters').on('click', '.delete-chapter', function(){
jQuery.ajax({
type: 'post',
url: "http://www.lukaspleva.com/MoneyThink/CreateNewChapter.php",
dataType: 'text',
data: $('#create_new_chapter').serialize(),
success: function(msg){ alert(msg); $('#current_chapters').load('NationalAdmin.php #current_chapters'); }
});
return false;
});
});
</script>