0

while ループを使用して作成されたリストがあり、ユーザーが削除ボタンをクリックすると、ajax を使用してデータベース内のエントリが削除され、リストが再描画されます。ユーザーが別のアイテムを削除しようとするまで、これはすべて正常に機能します。ボタンは何もせず、エラーも発生しません。それを機能させる唯一の方法は、ページを更新することです。

私は ajax を変更したので、返されるのはオリジナルと同じクラスのボタンだけで、少なくとも他に何もない場合にアラートをトリガーできるかどうかを確認できます。

AJAX

<script type="text/javascript">
  $(document).ready(function() {  
    $('.trash_btn').click(function(){
        alert('bob');
    var question = $(this).next('.id_question').val();
    var user = '<? echo $id; ?>';   
    alert(question+' '+user);
      $.msgbox("Are you sure you want to delete the selected question?", {  
        type: "error", 
        buttons: [
          {type: "submit", value: "Yes"},
          {type: "cancel", value: "No"}
        ]
      }, function(result) {

        if (result == 'Yes') {
            $.ajax({
               url: 'ajax/opinion_del.php',
               type:'POST',
               data: 'question='+ question +'&user='+user,
               success: function(response){
               $('#responses_table').html(response);
            },
        error:function (xhr, ajaxOptions, thrownError){
        alert(thrownError);
        } // End of success function of ajax form
          }); 
        }
      });
    });
  });
</script>

表の関連部分

<td class="details">
      <input type="button" name="del_question" value="" class="trash_btn">
      <input type="hidden" class="id_question" name="question_id" value="<? echo $row['questionID']; ?>">
      <input type="hidden" class="id_user" name="user" value="<? echo $id; ?>"  >      
</td>

動作しないテスト ボタンを作成する AJAX 出力 (元々は JSON を使用していましたが、テスト用に削除されました)

$smeg = '<input type="button" value="test" class="trash_btn">';
echo $smeg;
4

1 に答える 1

1

イベント バインディングを標準のイベント ハンドラーではなく、委任されたイベント ハンドラーに変更することをお勧めします。何が起こっているのかというと、ページの読み込み時に要素に正しくバインドしていますが、AJAX 呼び出しを介して DOM を更新すると、バインドされていた要素を削除しているため、バインドが失われます。

例えば

$('.trash_btn').click(function(){

変更:

$('#responses_table').on("click", ".trash_btn", function(){

委譲されたイベント ハンドラーを使用するということは、イベント ハンドラーが実際に#responses_table要素にバインドされていることを意味し、イベント ハンドラーが起動すると、 で参照されている要素をチェックしevent.targetて、 の 2 番目の引数として渡したセレクターと一致するかどうかを確認します.on()。このようにして、DOM をいじったり HTML を変更したりしても、イベント ハンドラーは機能します。

click別の方法は、AJAX コールバックを介して DOM を更新した後にイベント ハンドラーを再バインドすることです。

于 2013-10-24T22:11:17.213 に答える