事件处理程序不在外部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 
});

的Ajax加载的内容：

<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.jsajaxComplete其他事件处理程序被解雇，即使他们'绑定到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文件中工作？

回答

相关问题