jQuery的.load（）无法正常工作

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

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

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

看看代码发生了什么，看起来.load（）函数在页面上已经创建了一个额外的form =“update_existing_chapters”，其形式为id =“update_existing_chapters”。

基本上，它不是刷新div或表单，而是在其中创建一个副本，这会打破代码。

相关的代码是：

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

任何想法，为什么它的创建重复的元素/部分，而不只是刷新当前一个？

更新＃1

我现在意识到我必须使用。对（）保存，删除事件的按钮。我尝试了下面的代码，但实际上完全打破了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>

来源

2012-09-18 Lukas Pleva

重装列表中，您的删除按钮复位事件之后。您必须使用保持不变的父级DOM元素。

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

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

负载功能用于内容的装载部分，但在这里我们收到完整的页面（使用HTML，身体等）
插入内容后，我们丢失删除事件（on是很好的替代为live）
用另一种形式替换表单内容，这就是为什么你有两种形式。

来源

2012-09-18 09:59:23 webdeveloper

对不起，你能解释一点吗？ –

我回答关于删除按钮的问题当你从服务器加载数据并替换内容时，所有附加事件用'$（“。delete-chapter”）'去掉，只需将我的提示替换成你的代码（在你使用确认的地方） – webdeveloper

停止，就像我在控制台中看到的那样，你完全用ajax加载页面，这是错误的逻辑。 – webdeveloper

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

来源

2012-09-18 09:52:39 thecodeparadox

谢谢您的建议。我试过了，但是仍然遇到了我上面指出的问题： –

jQuery的.load（）无法正常工作

回答

相关问题