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。

这是向表中添加新<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>

我的问题是

点击通过js添加新行span.switch-setting的{{1}}元素无效;在settings_table.js中定义的操作未针对

运行

我尝试了什么

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

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

Answer 1

尝试重写您的on代码：

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

使用javascript附加html和js代码

我的问题是

我尝试了什么

1 个答案: