0

这是有问题的页面：

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>
4

2 回答 2

0 
$('form#update_existing_chapters')
    .empty()
    .load('NationalAdmin.php form#update_existing_chapters');
于 2012-09-18T09:52:39.857 回答
0

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

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

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

  • load 函数用于加载部分内容，但这里我们接收整页（带有 html、body 等）
  • 插入内容后，我们丢失了删除事件（on是很好的选择live）
  • 您将表单内容替换为另一个表单，这就是您有两个表单的原因。
于 2012-09-18T09:59:23.997 回答