javascript - repeat the click only on the last button pressed in jquery

Question

I have a number of buttons on a page. Each button has a different ID. After clicking on any of the buttons, the chat information is displayed. After clicking the button, I want this to be done automatically again.

Problem :

If I click on one button(start chat) first and then the other, the system clicks on two buttons. But I want to repeat the click only on the last button pressed.

I used the following code, but the two buttons are clicked.

var intervalID = setInterval(myCallback, 3000);

function myCallback()
{
    $("#vj'.$row['id'].'").click();

}

OR :

var intervalID = setInterval(myCallback, 3000);

function myCallback()
{
    $("#vj'.$row['id'].'").trigger("click");

}

full code :

<?php
    $query_first = "SELECT * FROM apply WHERE cgemail='$email' ";
    $results_first = mysqli_query($conn, $query_first);
    while($row = mysqli_fetch_assoc($results_first)){
        $cremail=$row['email'];
        $query_first2 = "SELECT * FROM users_cr WHERE email='$cremail' ";
        $results_first2 = mysqli_query($conn, $query_first2);
        $row2 = mysqli_fetch_assoc($results_first2);

    $acc=$row['accept'];
    if($acc==0){$show=_45;}else{$show='<b class="text-success">'._44.'</b>';}
    echo'
        <div class="mb-5">
            <div class="mb-4 just">
                <span class="fs-4 fw-bold">'.$row['title'].'</span>&nbsp;<span class="text-muted">'.$row['timesubmit'].'</span><span class="color_orange float-end pr-3 pt-3">'.$show.'</span>
                <br><br>
                <b class="text-success fw-bold">'._CARERECEIVER2.' : '.$row2['name'].'</b><br>
                '.$row['description'].' 
                <br>
            </div><br><br>
            <button id="vj'.$row['id'].'" onmousedown="func1" class="btn btn-primary float-end">'._46.'</button>
        </div>
        <hr>                                        
        <script>                                                    
            $(document).ready(function(){                                               
                
                $("#vj'.$row['id'].'").click(function(event){

                            
                var bla = '.$row['id'].';
                var requestid = '.$row['requestid'].';
                    $.ajax({
                        type: "POST",
                        url: "fetch_one_chat.php",
                        data: {bla2:bla,bla3:requestid},
                        beforeSend: function (html) {
                            
                        },
                        success: function (msg) {
                            
                            $("#one").html(msg);
                            
                            var intervalID = setInterval(myCallback, 3000);

                            function myCallback()
                            {
                                $("#vj'.$row['id'].'").click();

                            }
                            
                            
                        }
                    });
                });                                         


                    
                
            });                                                                                     
        </script>                                           
    ';
    }                                               
?>

标签： javascriptjqueryclick

Answer 1

I just wrote a html code for you with jQuery and Bootstrap

You just need to create a new setTimeout function to click the same button again, on first click of the respective button.

This will create a loop and keep your one of the last clicked button automatically clicking.

$(function() {
  let theTimeout;
  let clickNo = 0;
  console.log("Btn function");
  $(".btn-to-click").on("click", function() {
    clickNo++;
    let btnElement = this.getAttribute("id");
    console.log("Button clicked with id " + btnElement + " => " + clickNo);
    clearTimeout(theTimeout);
    theTimeout = setTimeout(() => {
      $(`#${btnElement}`).trigger("click");
    }, 1000);
  });
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<div class="container">
  <button class="btn btn-primary btn-to-click" id="click-me-1">
        click me one
      </button>
  <button class="btn btn-success btn-to-click" id="click-me-2">
        click me two
      </button>
</div>