javascript - 点击事件不会在 jquery 中触发

Question

我添加了一个新元素，但是当我点击它时它没有任何反应。

HTML

<button>add element</button>
<div></div>

Javascript

$(function(){
    $('button').click(function(){
        $('div').append('<span class="x">x</span>');
    });

    $('.x').click(function(){
        alert('fire'); 
        });
});

Answer 1

$(function() {
  $('button').click(function() {
    $('div').append('<span class="x">x</span>');
  });

  $('div').on('click', '.x', function() {
    alert('fire');
  });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button>add element</button>
<div></div>

事件处理程序只绑定(bind)到当前选中的元素；在您的代码进行事件绑定(bind)调用时，它们必须存在于页面上。

Delegated events have the advantage that they can process events from descendant elements that are added to the document at a later time.

在创建元素时。

您需要使用 Event Delegation .你必须使用 .on()使用委托(delegate)事件方法。

一般语法

$(document).on(event, selector, eventHandler);

理想情况下，您应该将 document 替换为最接近的静态容器。

例子

$('div').on('click', '.x', function(){
    alert('fire'); 
});