Javascript 事件处理程序在外部JS文件中不工作？

这很有效：（将所有内容保存在一个文件中）

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>

数据标签id='row\u rename''
数据切换=“模态”
数据目标=“#重命名行模式”>
重命名行
行名称
取消
改名

---

让我困惑的是，

func_rows.js

中的

ajaxComplete

中的其他事件处理程序即使绑定到ajax加载的元素也会被触发。我所期望的是，当您单击带有

.ready create rename row

的按钮时，控制台中将弹出一条消息，但什么也没有发生。但是，当我将事件处理程序放在同一个html文件（用作模板）中时，它就起作用了。

证明罪魁祸首是

ajaxComplete

处理程序中的另一个方法：

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

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

---

.off（）

基本上禁用了它之前发生的所有事件，因此我不得不将它放在顶部，将

'body'

更改为类

。重命名行'

，以更加安全。

发现罪魁祸首是

ajaxComplete

处理程序中的另一个方法：

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

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

---

.off（）

基本上禁用了它之前的所有事件，所以我不得不将它放在顶部，将

'body'

更改为类

。重命名行“

，这样更安全。

在附加委派事件处理程序时，为什么还要麻烦使用

$.ajaxComplete（）

？所有这些都将在连续的请求上复制处理程序，我认为我需要它来加载ajax内容。所以可以把它拿走吗？绝对可以。如果文件路径正确，只需使用委托事件处理程序即可。@Suchitkumar yes。正如我所说，ajaxComplete中还有其他事件处理程序，它们由于某种原因而被解雇。当我将

.ready create rename row

的事件处理程序传输到基本文件或加载脚本的文件时，它会起作用。但是当它在外部js文件中时，不会被触发。我不确定我遗漏了什么。在附加委派事件处理程序时，为什么还要麻烦使用

$.ajaxComplete（）

？所有这些都将在连续的请求上复制处理程序，我认为我需要它来加载ajax内容。所以可以把它拿走吗？绝对可以。如果文件路径正确，只需使用委托事件处理程序即可。@Suchitkumar yes。正如我所说，ajaxComplete中还有其他事件处理程序，它们由于某种原因而被解雇。当我将

.ready create rename row

的事件处理程序传输到基本文件或加载脚本的文件时，它会起作用。但是当它在外部js文件中时，它不会被触发。我不确定我错过了什么。

<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>

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

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