javascript - 切换按钮

Question

我正在尝试将单击按钮从“暂停”更改为“取消暂停”，反之亦然。它可以将其从暂停更改为取消暂停，但如果没有页面刷新，它不会将其更改回实时运动中的暂停。我需要以某种方式进行切换。我需要它在 2 ajax 中，因为它做了 2 件完全不同的事情。这是我尝试过的。

PHP/HTML

<?php
while ($datas = $data->fetch_object()) { // here I load the table
    if($datas->active == 1) { // I compare the value from column id
        $susspend_button = '<button id="susspendb-'.$datas->id.'" class="btn btn-warning btn-sm susspend">Susspend</button>';
    } else {
        $susspend_button = '<button id="unsusspendb-'.$datas->id.'" class="btn btn-warning btn-sm un-susspend">Un-Susspend</button>';
    }
?>
    <div id="susspendd<?php echo $datas->id; ?>" class="col-md-4">
        <?php echo $susspend_button; ?>
    </div>
<?php
 } // closing the while
 ?>

JQUERY

$('.susspend').click(function(event) {
    var id = event.target.id;
    var user = id.split('-');
    var user_id = user[1];
    $.ajax({
        url: 'includes/ajax.php',
        data: {
            action: 'susspend_user',
            user_id: user_id
        },
        type: 'POST',
        success: function(data) {
            $('#suspendb'+user_id).fadeOut();
            $('#susspendd'+user_id).html('<button class="btn btn-warning btn-sm un-susspend" id="un-susspendb' + user_id + '">Un-Susspend</button>').fadeIn();
        }
    });
});
$('.un-susspend').click(function(event) {
    var id = event.target.id;
    var user = id.split('-');
    var user_id = user[1];
    $.ajax({
        url: 'includes/ajax.php',
        data: {
            action: 'unsusspend_user',
            user_id: user_id
        },
        type: 'POST',
        success: function(data) {
            $('#suspendb'+user_id).fadeOut();
            $('#susspendd'+user_id).html('<button class="btn btn-warning btn-sm susspend" id="unsusspendb' + user_id + '">Susspend</button>').fadeIn();
        }
    });
});

Answer 1

问题是当您单击按钮时，单击功能不起作用，请尝试向添加按钮的 div 添加一个类，例如

<div id="susspendd<?php echo $datas->id; ?>" class="col-md-4 sample">
    <?php echo $susspend_button; ?>
</div>

并更改按钮单击功能，例如

$('.sample').on('click', '.susspend', function(event) {

并将其应用于按钮单击功能。