Question

我有一个静态元素，但即使我使用它，.on也不会绑定到动态选择器。

这是一个比我正在处理的版本更简单的版本，但确实有同样的问题。

当我点击静态元素时会创建div，但点击动态元素什么都不做。

希望有人可以帮助我。

HTML

＆＃13;

$(document).ready(function() {

  var test = $('#test');

  test.click(function() {

    var html = document.createElement('div');
    html.className = 'temp';
    $('body').append(html);
    console.log('clicked.');

  });

  test.on('click', '.temp', function() {

    console.log('Temp div removed.');
    $(this).remove();

  });

});

＆＃13;

#test {
  width: 300px;
  height: 75px;
  background: #f00;
  margin-bottom: 5px;
}

.temp {
  width: 200px;
  height: 50px;
  background: #00f;
  margin-bottom: 3px;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<div id="test"></div>

＆＃13;

Answer 1

您需要将事件委托设置为动态元素的父级。您已将事件限制为#test元素，但.temp div是正文的子元素。您可以将事件添加到正文，也可以添加到添加节点的专用容器中。

$(document).ready(function() {

  var test = $('#test');
  var target = $('#target');

  test.click(function() {

    var html = document.createElement('div');
    html.className = 'temp';
    target.append(html);
    console.log('clicked.');

  });

  target.on('click', '.temp', function() {

    console.log('Temp div removed.');
    $(this).remove();

  });

});

#test {
  width: 300px;
  height: 75px;
  background: #f00;
  margin-bottom: 5px;
}

.temp {
  width: 200px;
  height: 50px;
  background: #00f;
  margin-bottom: 3px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<div id="test"></div>
<div id="target"></div>

无法让jQuerys .on使用动态元素，即使它被委派了

1 个答案: