使用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 。

這是向表添加新的<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>

我的問題是

單擊via js的span.switch-setting元素添加新行<tr>無效； 在settings_table.js中定義的操作未針對

我嘗試了什么

• 將settings_table.js函數添加到響應和ajax請求的新元素中，然后單擊新的el我的JavaScript工作

• 但是，如果單擊表中的舊元素，則警報將顯示兩次，並且，

• 如果添加了另一個元素，然后再次單擊某個較舊的元素，警報將顯示三次。

一些想法如何將javascript交互添加到通過js添加的元素或防止這些多次調用？

Answer 1

嘗試重寫您on代碼：

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