javascript - 使用javascript附加html和js代码

Question

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

html文件.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>

设置表.js

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

在同一个 html 文件中是一个在提交时发送 ajax 请求的表单。响应后，一个新元素被添加到 table.settings-table .

这是添加新 <tr> 的 ajax 响应示例表中的元素。

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

响应是:

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

我的问题是

点击 span.switch-setting via js 的元素添加了新行 <tr>没有效果； settings_table.js 中定义的操作未运行

我尝试了什么

• 将 settings_table.js 函数添加到响应和 ajax 请求的新元素，然后单击新的 el my javascript works

• 但是如果单击表格中的旧元素，则会显示两次警报，并且，

• 如果添加了另一个元素，然后再次单击某个较旧的元素，则会显示 3 次警报。

一些想法如何将 javascript 交互添加到通过 js 添加的元素或防止这些多次调用？

Answer 1

尝试重写您的on 代码:

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