イベントハンドラが外部JSファイルで動作していませんか？

これは動作します：これはしませんイベントハンドラが外部JSファイルで動作していませんか？

<html><head></head> 
    <body> 
    //content-wrapper --> ajax loaded 
    <script type="text/javascript"> 
     $(document).ajaxComplete(function(event, xhr, settings) { 
      var a_row_id = 0; 
      $('body').on('click', '.ready-create-rename-row', function() { 
       a_row_id = $(this).data('row-id'); 
       console.log('Attempting to rename row ' + a_row_id); 
      }); 
     }); 
    </script>  
    </body> 
</html>

を（一つのファイルにすべてのそれを維持する）：私はすべてのエラーを得ていないんだけど、イベントハンドラは発生しません。コンソールが空

<html><head></head> 
    <body> 
    <!-- content-wrapper -- ajax loaded -->   
    <script src="<?php echo base_url();?>assets/js/func_rows.js" type="text/javascript"></script> 
    <script type="text/javascript"> 
     //Some code in document.ready 
    </script>  
    </body> 
</html>

func_rows.jsまま：

$(document).ajaxComplete(function(event, xhr, settings) { 
    var a_row_id = 0; 
    $('body').on('click', '.ready-create-rename-row', function() { 
     a_row_id = $(this).data('row-id'); 
     console.log('Attempting to rename row ' + a_row_id); 
    }); 
    //Other events here get fired however 
});

をアヤックスは、コンテンツをロード：私を混乱何

<div class="row-options"> 
    <button type="button" class="flat circle ready-create-rename-row" 
       data-row-id=<?php echo $r->id; ?> 
       data-label-id='row_rename_<?php echo $r->id; ?>' 
       data-toggle="modal" 
       data-target="#rename-row-modal"> 
       <i class="mdi mdi-pencil"></i> 
    </button> 
</div> 

<!-- Rename Row Confirmation Modal --> 
<div id="rename-row-modal" class="modal fade" role="dialog"> 
    <div class="modal-dialog plain-material-dialog confirmation"> 
     <!-- Modal content--> 
     <div class="modal-content plain-material-content"> 
     <div class="modal-body plain-material-body"> 
       Rename Row 
     <div class="material-input-group stretched"> 
        <label>Row name</label> 
        <input type="text" id="create-new-row-name" required> 
       </div> 
     </div> 
     <div class="modal-footer plain-material-footer"> 
      <button type="button" class="btn btn-default flat" data-dismiss="modal">cancel</button> 
      <button type="button" class="btn btn-default flat" id="create-rename-row">rename</button> 
     </div> 
     </div> 
    </div> 
</div>

はしても、彼らfunc_rows.jsでajaxComplete内の他のイベントハンドラが起動してしまうことがありますajaxをロードした要素にバインドされています。私が期待しているのは、.ready-create-rename-rowでボタンをクリックすると、メッセージがコンソールにポップアップしても何も起こらないということです。しかし、イベントハンドラを（テンプレートとしての役目を果たす）同じhtmlファイルに置くと動作します。

出典

2017-03-02 herondale

委任されたイベントハンドラをアタッチしているときに '$ .ajaxComplete（）'を使用するのはどうしてですか？これでやることは、連続したリクエストでハンドラを複製することです。 –

私はAJAXがロードされたコンテンツに必要と思っていました。だから、それを削除するのは大丈夫ですか？ – herondale

絶対に問題ありません。デリゲートされたイベントハンドラを単独で使用してください。 –

犯人はajaxCompleteハンドラ内の別の方法で判明：

$('body').off().on('click', '.rename-row' function() 
{ 
    //stuff 

    $.ajax({ 
    //Stuff 
    }); 
});

.off()は、基本的には、その前に来たすべてのイベントを無効にされたので、私は一番上にそれを置くために持っていただけ'body'を変更より安全になるためには、クラス.rename-row'に。

出典

2017-03-03 01:04:38 herondale

イベントハンドラが外部JSファイルで動作していませんか？

答えて

関連する問題