事件未在动态生成的元素上触发

Question

我有一个 table，其中 table 我在每一行的第一列中为用户提供了一个按钮来删除该行，并且当用户输入鼠标时动态生成该删除按钮在第一列，这是代码

$('table').on('mouseover', "td.y-id", function () {
     $(this).append($('<a class="dlt-x" style="float: right; cursor: pointer; cursor: hand;"> <i class="fa fa-trash"></i> </a>'));
});
$('table').on('mouseleave', "td.y-id", function () {
    $('.dlt-x').remove();
});

并且我注册了一个事件来点击这样的删除按钮

$('table').on('click', 'a.dlt-x', function () {
  alert("clicked");
});

而且这个事件没有触发。我查看了其他类似问题并尝试了所有解决方案，找到了相关的委托绑定但无法解决问题。

Answer 1

如果您正在触发动态元素。像下面这样使用

$('body').on('click',"#dynamic_element_id",function(){
   // you code
})

Answer 2

改为将事件侦听器更改为 mouseenter。否则，如果您将鼠标移到里面，您将继续追加该元素。

$('table').on('mouseenter', "td.y-id", function() {
  $(this).append($('<a class="dlt-x" style="float: right; cursor: pointer; cursor: hand;"> <i class="fa fa-trash"></i> </a>'));
});
$('table').on('mouseleave', "td.y-id", function() {
  $('.dlt-x').remove();
});

$('table').on('click', 'a.dlt-x', function() {
  alert("clicked");
});

<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table>
  <tr>
    <td>Foo</td>
    <td>Bar</td>
    <td class="y-id">Delete</td>
  </tr>
  <tr>
    <td>Foo</td>
    <td>Bar</td>
    <td class="y-id">Delete</td>
  </tr>
</table>

Answer 3

如果不存在则停止追加相同的元素追加

$(function() {
  $('table').on('mouseover', "td.y-id", function (e) {
      if ($('.dlt-x').length === 0) {
        $(this).append($('<a class="dlt-x" style="float: right; cursor: pointer;">X</a>'));
      }
  });
  
  $('table').on('mouseleave', "td.y-id", function () {
      $('.dlt-x').remove();
  });
  
  $('table').on('click', 'a.dlt-x', function () {
    alert("clicked");
  });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table>
  <tr>
    <td class='y-id'>1</td>
  </tr>
  <tr>
    <td class='y-id'>2</td>
  </tr>
</table>

事件未在动态生成的元素上触发

Event not triggering on dynamically generated element

javascript

jquery

jquery-events