Question

以下是相关网页：

http://www.lukaspleva.com/MoneyThink/NationalAdmin.php

如果您转到该页面，您将看到只需单击每行旁边的红色十字按钮即可从系统中删除章节。当您这样做时，顶部的章节计数器会自动更新。

当您通过顶部的部分向混音添加新章节时出现问题。添加新部分并更新计数器，但删除按钮停止工作。

看看代码发生了什么，似乎.load（）函数正在创建一个额外的form =“update_existing_chapters”WITHIN，其形式为id =“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>

Answer 1

$('form#update_existing_chapters')
    .empty()
    .load('NationalAdmin.php form#update_existing_chapters');

Answer 2

重新加载列表后，删除按钮的事件将重置。您必须使用保持不变的父DOM元素。

$('#current_chapters_container').on('click', '.delete-chapter', function(){
    alert('delete');
});

<强>更新我们可以看到几个问题：

load函数用于加载部分内容，但在这里我们收到整页（带有html，正文等）
插入内容后，我们会丢失删除事件（on是不错的选择 for live）
您将表单内容替换为另一种表单，这就是您有两种表单的原因。

jQuery .load（）无法正常工作

2 个答案: