jquery: $ (document) .on ("click" ...) executes the clicks of several selectors

Question

jquery: $ (document) .on ("click" ...) executes the clicks of several selectors

Navigation

#1 by (2 votes)
#2 by (1 votes)

0

Good morning, it turns out that the "click" events listen to both the selector that I'm dialing with $(document) and those that are above, even if they are not their children and are not called the same.

To see it, I put the code of the three pages:

I have 3 pages:

index.php

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js">
</script>   

<div><?php include "page1.php"; ?></div>
<div><?php include "page2.php"; ?></div>

page1.php

<button id="add">Add</button>
<script>
$(function () {
    var i = 0;
    $(document).on('click', i, '#add',  function(  ){
        //alert ("page1");
        i+=1;
        alert (i);
        var the_html = '<button class="my_class">Alert</button>';
        $("#my_table").append(the_html);
    }); 
});
</script>

page2.php

<div id="my_table"> 
</div>
<button id="clean">Clean</button>
<script>
$(function () {
    $(document).on('click', '.my_class',  function(){
        alert ("page2");
    });

    $(document).on('click', '#clean',  function(){
        $(".my_class").off();
        $("#my_table").html("");        
    });

});
</script>

javascript jquery dom

asked by Alberto García de Haro 12.01.2018 в 13:49

source

2 answers

1

I do not know if I get your answer but it should be like this:

$(function() {
  var i = 0;
  $('#add').on('click', function() {
    i += 1;
    var the_html = '<button class="my_class">Alert</button>';
    $("#my_table").append(the_html);
  });
});

$(function() {
  $(document).on('click', '.my_class', function() {
    alert("page2");
  });

  $(document).on('click', '#clean', function() {
    $(".my_class").off();
    $("#my_table").html("");
  });

});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<button id="clean">Clean</button>
<button id="add">Add</button>

<div id="my_table">
</div>

When you give it to the document, you are giving it the click of ALL the HTML (try clicking the div)

answered by 12.01.2018 в 14:33

Error converting json to fix [closed] Validate if I select a value in the checkboxs

score 2 · Accepted Answer

According to the documentation of $.on() The footprint for the method is:

.on( events [, selector ] [, data ], handler )

When you use the data parameter, the handler function (which by default receives as a parameter the event ) can access that data by event.data .

$(document).on('click','#selector',{nombre:'juan'},function(event) {
   console.log(event.data.nombre);
   // imprime 'juan'
});

The way you are stating, your listener receives i as selector and #add as event.data , that is, the parameters are upside down. Also, putting as a selector something that is not a selector will generate a listener that listens to all the clicks of the document.

If you want to pass to the function the value of i , it should be

$(document).on('click',  '#add', i, function(){ ... }

But since i is a variable outside the scope of the function, in reality this is not necessary. And it will not work because it evaluates i as 0 when it is declared. That is the same as putting:

$(document).on('click',  '#add', 0, function(){ ... }

I leave you a code where, instead, I manage the counter of the rows internally using a data attribute of the "Add Modified" button.

$(function () {
    var i = 0;
    $(document).on('click', '#add',i,  function(event){
        i+=1;
        console.log('i vale ${i}, event.data vale ${event.data}');
        var the_html = '<button class="my_class">Alert</button>';
        $("#my_table").append(the_html);
    });
    $(document).on('click', '#add2', function(event){
        let _this=$(this),
            _counter=parseInt(_this.data('counter'),10);
            _this.data('counter',_counter+1);
            
        console.log('counter vale ${_this.data('counter')}');
        var the_html = '<button class="my_class">Alert</button>';
        $("#my_table").append(the_html);
    }); 

    $(document).on('click', '.my_class',  function(){
        alert ("page2");
    });

    $(document).on('click', '#clean',  function(){
        $(".my_class").off();
        $("#my_table").html("");        
    });

});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js">
</script>   

<div>
  <button id="add">Add</button>&nbsp;
  <button data-counter="0" id="add2">Add Modificado</button>
</div>
<div><div id="my_table"></div>
<button id="clean">Clean</button></div>