Jquery加载多个警报

Question

I am trying to bring the identification data from the HTML DOM with Jquery but when I press the button the first time, this is done twice, then it increases to 3 and so on ... I read that it is because Jquery I am getting all the data-identification, but he tried several things and none has given me the result.

 <script>
    function hi(text){
       $(document).ready(function() {
       $('button').on('click', function() {
       console.log(this.dataset.id, $(this).data().id, 
       $(this).data('id'));

       alert("It is done many times ...");
  });
});    
       }
    </script>

And php:

       $i = 0;

        foreach($arr as $data ){

        $iterator = new RecursiveIteratorIterator(new 
RecursiveArrayIterator($data), RecursiveIteratorIterator::SELF_FIRST);
          $find_variables = (iterator_to_array($iterator,true));


          foreach($find_variables as $rec){
            if (is_array($rec)) {
              if (!empty($rec) && ($rec['text'] != '') ) {
              $manjar = json_encode($rec);
              $manj1 = htmlspecialchars($manjar , ENT_QUOTES);

                echo '</a></td><div id="my-div3"><td><button class="btn btn-danger" type="button" data-id="'.$i .'" onclick= "hi(' . $manj1 . ')">Info</a></td></tr>';

                $i++;   
              }else{
                continue;

              }

            }
          }


    }

In summary: I press click the first time and I get two alerts, I close it and press again on the button and three come out. I close them, I press the button again and four ... so on ... I would appreciate your help, I've been reviewing but nothing that works ...

Answer 1

You are using two event listeners ... one is the inline onclick and inside the function hi() you add another event listener with jQuery.

Each time hi() is called in the onclick you add another listener again

Get rid of the inline onclick and get rid of the function hi() and just use the jQuery on('click'..

Use another data attribute to pass in $manj1