jquery - 事件触发后，ajax调用后创建的按钮不起作用[重复](Button created after ajax call not working while event is triggered [duplicate])

Question

This question already has answers here) : 这个问题已经在这里有了答案) ：)

Event binding on dynamically created elements? 在动态创建的元素上进行事件绑定？) (23 answers) （23个答案）)

Closed 8 hours ago . 8小时前关闭。)

I have the following code in html:

(我在html中有以下代码：)

<table class="table table-striped">
<thead class="inner">
    <tr>
        <th>Name</th>
        <th>Parent</th>
        <th>Priority</th>
        <th>Action</th>
    </tr>
</thead>
<tbody id="check">
    <tr>
        <td><a href="">test</a></td>
        <td>null</td>
        <td>0</td>
        <td>
            <button value="3" type="button" class="btn btn-danger btn-sm"><i class="fa fa-trash-o"></i></button>
        </td>
    </tr>
    <tr>
        <td><a href="">Lifestyle</a></td>
        <td>null</td>
        <td>1</td>
        <td>
            <button value="2" type="button" class="btn btn-danger btn-sm"><i class="fa fa-trash-o"></i></button>
        </td>
    </tr>
    <tr>
        <td><a href="">Travel</a></td>
        <td>null</td>
        <td>1</td>
        <td>
            <button value="1" type="button" class="btn btn-danger btn-sm"><i class="fa fa-trash-o"></i></button>
        </td>
    </tr>
</tbody>

And I have the following code in the footer:

(在页脚中有以下代码：)

$("#check tr td button").click(function () {
    alert('here');
});

But the event does not seems to work.

(但是该事件似乎不起作用。)

Why is my code not working?

(为什么我的代码不起作用？)

The data in table are created after a ajax call.

(表中的数据是在ajax调用之后创建的。)

Is it because of ajax?

(是因为Ajax吗？)

  ask by Alisha translate from so

Answer 1

The event is registered before the elements exist in the DOM , which is why the function is not triggered.

(在元素存在于DOM之前注册该事件，这就是为什么不触发该功能的原因。)

The solution is to define the code after your ajax or use event delegation as below

(解决方案是在ajax之后定义代码或使用事件委托，如下所示)

$(document).ready(function() {
  $(document).on("click", "#check tr td button", function() {
    alert('here');
  });
});