使用javascript追加html和js代码

Question

当用户单击元素时，我有一个带有一些基本js交互的html表。就像这样：

htmlfile.html ...位置作用

    <tr>
        <td>1</td>
        <td>
            <span class="switch-setting">Action</span>
        </td>
    </tr>

    <tr data-id="position-2">
        <td>2</td>
        <td>
            <span class="switch-setting">Action</span>
        </td>
    </tr>
</table>
...
...

<script src="js/settings-table.js"></script>

settings_table.js

$(function () {
    $('.switch-setting').on('click', function () {
        alert('show alert');
    });
})

在同一个htmlfile中，有一个表单在提交时发送ajax请求。在响应之后，一个新元素被添加到table.settings-table中。

这是ajax响应向表中添加一个新的<tr>元素的一个例子。

$.post(url, form.serialize(), function (response) {
    $('.settings-table').append(response);
}); 

答复如下：

<tr>
    <td>3</td>
    <td>
        <span class="switch-setting">Action</span>
    </td>
</tr>

我的问题是

单击via js添加的新行span.switch-setting元素<tr>无效；在settings_table.js中定义的操作不运行

我试过的

• 将settings_table.js函数添加到响应和ajax请求的新元素中，然后单击新element工作
• 但是，如果单击表中的旧元素，则会显示两次警报，并且，
• 如果添加了另一个元素，然后再次单击某个旧元素，则会显示三次警报。

您知道如何将javascript交互添加到通过js添加的元素或防止这些多个调用吗？

Answer 1

尝试重写您的on代码：

$('.settings-table').on('click', '.switch-setting', function () {
    alert('show alert');
});