0

問題のページは次のとおりです。

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>
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）
  • フォームのコンテンツを別のフォームに置き換えるため、2つのフォームがあります。
于 2012-09-18T09:59:23.997 に答える