jQuery的委托功能是半工作 [英] jquery delegate function is half-working

问题描述

在先前的问题中，我有一个使用表中的多个下拉菜单作为选择列表的问题，此问题已得到解决，这要感谢 ZimSystem 和以下代码段:

in a previous question i had a problem useing multiple dropdown menus in table as select list and it was solved, thanks to ZimSystem with the following snippet:

$(function(){
   $(".dropdown-menu").on('click', 'a', function(){
       $(this).parents('.dropdown').find('button').text($(this).text());
   });
});

如果表是手动创建的，则此代码片段可以正常工作，在我的项目中，使用ajax请求tbody的tr记录，简而言之，它们将在html页面加载后添加.这使得之前的代码段无效.为了解决这个问题，我正在使用jQuery $('#myRecords').delegate(). 这就是我所拥有的，第一个log语句正在记录到控制台，但第二个则没有.有人知道为什么会发生这种行为吗?

this snippet works fine if the table was created manually, in my project the tbody's tr records are being requested using ajax, in short, they will be added after the html page is loaded. which makes the previous snippet don't work. to solve this problem i am using jQuery $('#myRecords').delegate(). here is what i have, the first log statement is logging to the console but the second one is not. does anybody knows why this behavior is occurring?

我的代码段

$('#myRecords').delegate(".dropdown-menu", "click", function(event){
  // $(this) = '.dropdown-menu'
  console.log($(this));
  $(this).on('click', 'a', function(){
    // $(this) = 'a'
    console.log($(this));
     $(this).parents('.dropdown').find('button').text($(this).text());
  });

表格

<table class="table">
<thead>
  <tr>
    <th>#</th>
    <th>First Name</th>
    <th>Last Name</th>
    <th>Status</th>
  </tr>
</thead>
<tbody id='myRecords'>
  <tr>
    <th scope="row">1</th>
    <td>Mark</td>
    <td>Otto</td>
    <td>
      <div class="dropdown">
        <button class="btn btn-outline-secondary dropdown-toggle" type="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
          Active
        </button>
        <div class="dropdown-menu" aria-labelledby="dropdownMenuButton">
          <a class="dropdown-item" href="#">Active</a>
          <a class="dropdown-item" href="#">Inactive</a>
        </div>
      </div>
    </td>
  </tr>
  <tr>
    <th scope="row">2</th>
    <td>Jacob</td>
    <td>Thornton</td>
    <td>
      <div class="dropdown">
        <button class="btn btn-outline-secondary dropdown-toggle" type="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
          Active
        </button>
        <div class="dropdown-menu" aria-labelledby="dropdownMenuButton">
          <a class="dropdown-item" href="#">Active</a>
          <a class="dropdown-item" href="#">Inactive</a>
        </div>
      </div>
    </td>
  </tr>
  <tr>
    <th scope="row">3</th>
    <td>Larry</td>
    <td>the Bird</td>
    <td>
      <div class="dropdown">
        <button class="btn btn-outline-secondary dropdown-toggle" type="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
          Active
        </button>
        <div class="dropdown-menu" aria-labelledby="dropdownMenuButton">
          <a class="dropdown-item" href="#">Active</a>
          <a class="dropdown-item" href="#">Inactive</a>
        </div>
      </div>
    </td>
  </tr>
</tbody>

推荐答案

，我解决了它！希望它也能对其他人有所帮助.

and i solved it !, hope it will help other people as well.

$('#myRecords').delegate(".dropdown-menu", "click", function(event){
  var status = event.target.text;
  $(this).prev('button').text(status);
});

这篇关于jQuery的委托功能是半工作的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！