javascript - JQuery - 交换触发器类时单击监听器不触发

Question

我有一个 jQuery on click 监听器，用于查找类“install-plugin”。

单击时，它会将类(通过 jQuery)更改为“delete-plugin”。

反之亦然，所以有一个“delete-plugin”的监听器，当单击它时，会将类更改为“install-plugin”。

我遇到的问题是这只有效一次，虽然我可以看到页面上的类已正确更新，但 jQuery 似乎没有看到，并且仍然触发原始监听器。

(ajax 是预期的扩展功能所必需的)。是否可以让 jQuery 始终与页面上的内容保持同步而无需硬刷新页面？

$(document).ready(function() {
    $('.install-plugin').click(function() {
        var id = $(this).attr('id');
        var postData = {
            action : 'install_plugin',
        }
        $.ajax({
            method: 'POST',
            url: "/wp-admin/admin-ajax.php",
            data: postData,
            success: function(response) {
                $('#'+id).text('Delete');
                $('#'+id).removeClass('install-plugin');
                $('#'+id).addClass('delete-plugin');
            }
        });
    })

    $('.delete-plugin').click(function() {
        var id = $(this).attr('id');
        var postData = {
            action : 'delete_plugin',
        }
        $.ajax({
            method: 'POST',
            url: "/wp-admin/admin-ajax.php",
            data: postData,
            success: function(response) {
                $('#'+id).text('Install');
                $('#'+id).removeClass('delete-plugin');
                $('#'+id).addClass('install-plugin');
            }
        });
    })
});

Answer 1

使用 'on' 语法，例如$(selector).on('click', function(event){....}) 用于动态更改的元素。

.click() fails after dom change