Question

我在点击监听器上有一个jQuery，它查找类'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

Answer 2

尝试

$(document).on('click', '.delete-plugin', function() {
   // your delete logic here
});

$(document).on('click', '.install-plugin', function() {
   // your install logic here
});

您的问题是，您只能在$('.install-plugin')上的clickHandler绑定$('.delete-plugin') `$('#'+id).text('Delete') .removeClass('install-plugin') .addClass('delete-plugin');`。我的建议可以防止这种行为。

顺便说一句：您可以在ajax successHandler中简化代码。

    $(document).on('click', '.install-plugin, .delete-plugin', function() {
       var action = ($(this).hasClass('install-plugin')) ? 'install_plugin' : 'delete_plugin';

        var id = $(this).attr('id');
        var postData = {
            action : action,
        }

       ....
    });

您还可以将所有功能放在以下功能中：

require "conn.php";
$username = $_POST["username"];
$fullName = $_POST["fullName"];
$age =$_POST["age"];
$bio =$_POST["bio"];
$year =$_POST["year"];
$gender =$_POST["gender"];
$location =$_POST["location"];
$sql = "UPDATE user_info SET fullName ='$fullName', bio='$bio',age='$age', gender='$gender', location='$location', year='$year' WHERE username = '$username' ";
$do = mysqli_query($conn, $sql);
if(mysqli_affected_rows($conn) >0){
echo 0;
}
else{
   echo $username;
}

JQuery - 交换触发器类时，单击侦听器不会触发

2 个答案: