首次单击按钮未被解雇 - Jquery 代表

Question

我在网页上动态加载了一个模板，打算用按钮的id做一些操作。我为模板上的所有按钮使用了相同的名称。我使用 Jquery 代表在单击按钮时提醒 id。

但问题是按钮单击事件不会在第一次按钮单击时触发，而是在后续单击时起作用。重新加载页面后，同样的问题再次出现。如何真正阻止这一点。我在下面附上 Jquery 代码。

JQUERY

 $("table").on("click", "button",function(event) {
    $("[name='DEL_BTN']").on('click',function(event){
        event.stopPropagation(); 
        alert(this.id)})
      });

HTML

<!-- LAYOUT OPTIONS -->
  <div class="container">
    <table class="table shadow p-3 mb-5 bg-white rounded" id="TABLE_CONTAINER">

    </table>
  </div>

HANDLEBARS_TEMPLATE

<thead class="thead-dark">
  <tr>
    <th scope="col">NAME</th>
    <th scope="col">EMAIL</th>
    <th scope="col">DOB</th>
    <th scope="col">DEPT</th>
    <th scope="col">GENDER</th>
    <th scope="col">AGE</th>
    <th scope="col"></th>
    <th scope="col"></th>
  </tr>
</thead>
<tbody>
    {{#each ALL_RECORDS}}
  <tr>
    <td scope="row">{{this.name}}</td>
    <td scope="row">{{this.eMail}}</td>
    <td scope="row">{{this.DOB}}</td>
    <td scope="row">{{this.dept}}</td>
    <td scope="row">{{this.gender}}</td>
    <td scope="row">{{this.age}}</td>
    <th scope="row" style="text-align: center"><button class="btn btn-primary" type="button" name="EDIT_BTN" id="{{this._id}}">EDIT</button></th>
    <th scope="row" style="text-align: center"><button class="btn btn-danger"  type="button" name="DEL_BTN" id="{{this._id}}">DELETE</button></th>   
  </tr>
  {{/each}}
</tbody>

另外请您解释一下发生这种情况的原因。非常感谢您。

Answer 1

之所以发生这种情况，是因为您将点击事件侦听器添加到按钮中的方式。您正在 [第一次单击] 的另一个处理程序中添加事件，因此，只有在您第一次单击后，才会注册其中包含警报处理程序的按钮单击 ($("[name='DEL_BTN']"))。

查看下面的评论。

 $("table").on("click", "button", function(event) {

    // Wen you click first time it will register the next click:

    $("[name='DEL_BTN']").on('click',function(event){

       // Then on the second click, this event is now defined,
       // that's why it runs only after the first click

        event.stopPropagation(); 
        alert(this.id)})
      });
  });

因此，为了解决这个问题，您只需像下面这样在第一个处理程序上声明一次：

$("table").on("click", "[name='DEL_BTN']", function(event) {
    event.stopPropagation(); 
    alert(this.id)})
});

Note on Handlebars.js: Make sure you are declaring this events after compiling the template with handlebars.

首次单击按钮未被解雇 - Jquery 代表

First button click not getting fired - Jquery Delegates

javascript

jquery

handlebars.js

JQUERY

HTML

HANDLEBARS_TEMPLATE