使用javascript附加html和js代码

Append html and js code using javascript

本文关键字：js 代码 html javascript 附加 使用      更新时间：2023-09-26

当用户单击某个元素时，我有一个html表，其中包含一些基本的js交互。类似这样的东西：

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');
    });
})

在同一个html文件中，有一个表单在提交时发送ajax请求。在响应之后，一个新元素被添加到CCD_ 1。

这是一个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添加的新行<tr>的span.switch-setting元素没有效果；settings_table.js中定义的操作未针对运行

我尝试了什么

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

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

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

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

尝试重写on代码：

$('.settings-table').on('click', '.switch-setting', function () {
    alert('show alert');
});
相关文章：