切换按钮

Question

我正在尝试将点击按钮从暂停更改为取消暂停和相反。它可以将它从Suspend更改为Un-suspend，但如果没有页面刷新，它将不会将其更改为在实时动作中暂停。我需要在切换中以某种方式制作它。我需要它在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

FIDDLE

我根据你给出的代码做了一个例子......现在告诉我你想从这个...你想要你创建的div需要被点击......

$('.susspend').click(function(event) {
    var id = event.target.id;
    var user = id.split('-');
    var user_id = user[1];
    console.log(user_id)

            $('#susspendb-'+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];

            $('#unsusspendb-'+user_id).fadeOut();
            $('#susspendd'+user_id).html('<button class="btn btn-warning btn-sm susspend" id="unsusspendb' + user_id + '">Susspend</button>').fadeIn();

});

Answer 2

问题是当你点击按钮，点击功能不起作用时，尝试将一个类添加到添加了按钮的div

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

并更改按钮单击功能，如

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

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

Answer 3

为什么不使用简单的显示器？和显示块？隐藏按钮是最容易解决的方法我会说：）