jquery 和 console.log 问题

Question

I have multiple toggle switches on my page. They are from bootstrap. Everything works as expected, however, I have come across an error within the javascript console. Or warning should I say. When I have only one toggle on the page and I click it it will print one line in the console, which is as expected. When I dynamically add another toggle, using the script below, when I click on the last added toggle it will print again only one line, but every other will print multiple lines.

Ie when I have 5 toggles and click on the last one, it will print one line in the console. When I click on 4th it will print two lines and so on. When I click on the 1st it will print 5 lines.

If I have multiple toggles set from beginning without adding them dynamically it works fine.

Any ideas?

<script>

$(window).ready(function() {

  $("[data-toggle='toggle']").bootstrapToggle({
    on: 'On',
    off: 'Off',
    size: 'small'
  });

  $('#addRow').on('click', function(event) {
    event.preventDefault();
    var rowID =+ $('table tr:last').attr('id')+1;

      $('#users').find('tbody').append([
      "<tr class='userRow' id='"+rowID+"'>",
        "<td>"+rowID+"</td>",
        "<td><input type='text' class='form-control'></td>",
        "<td><input type='text' class='form-control'></td>",
        "<td><input type='text' class='form-control'></td>",
        "<td><input type='checkbox' class='toggle-voicemail' data-toggle='toggle'></td>",
        "<td><input type='checkbox' data-toggle='toggle' class='toggle-ringgroup'></td>",
        "<td><input type='checkbox' data-toggle='toggle' class='toggle-ringgroup'></td>",
        "<td><input type='checkbox' data-toggle='toggle' class='toggle-ringgroup'></td>",
        "<td><a class='deleteRow btn btn-danger' value='"+rowID+"'>Delete</a></td>",
      "</tr>"
      ].join(''));

      $("[data-toggle='toggle']").bootstrapToggle('destroy');
      $("[data-toggle='toggle']").bootstrapToggle({ size: 'small' });

    $('.toggle-voicemail').on('change', function(event) {
    event.preventDefault();
    var id = $(this).parents('tr').attr('id');
    console.log("Voicemail for userID:"+id);
   });

});

    $('.toggle-voicemail').on('change', function(event) {
    event.preventDefault();
    var id = $(this).parents('tr').attr('id');
    console.log("Voicemail for userID:"+id);

    });

    $('#users').on('click', 'a.deleteRow', function(event) {
    event.preventDefault();
    //var id = $(this).find('a').attr('value');
    $(this).parents('tr').remove();

    });
});
</script>

HTML

<div class="box box-primary" id="usersDetails" style="">
  <div class="box-header with-border">
    <h3 class="box-title">Users</h3>
  </div>
  <div class="box-body">
    <table class="table table-condensed text-center" id="users">
      <thead>
        <tr>
          <th>ID</th>
          <th width="300">Username</th>
          <th>Phone</th>
          <th></th>
          <th>Voicemail</th>
          <th width="50">RG 1</th>
          <th width="50">RG 2</th>
          <th width="50">RG 3</th>
          <th width="100"></th>
        </tr>
      </thead>

    <tbody>

      <tr class='userRow' id='1'>
        <td>1</td>
        <td><input type='text' class='form-control'></td>
        <td><input type='text' class='form-control'></td>
        <td><input type='text' class='form-control'></td>
        <td><input type='checkbox' class='toggle-voicemail' data-toggle='toggle'></td>
        <td><input type='checkbox' data-toggle='toggle' class='toggle-ringgroup'></td>
        <td><input type='checkbox' data-toggle='toggle' class='toggle-ringgroup'></td>
        <td><input type='checkbox' data-toggle='toggle' class='toggle-ringgroup'></td>
        <td></td>
      </tr>



    </tbody>
  </table>
  <input type="button" id="addRow" value="Add another user" class="btn btn-success">
  </div>
</div>

Answer 1

You are adding the event function multiple times. The solution to this is to make your function non-anonymous:

var myFunc = function(event) {
    event.preventDefault();
    //var id = $(this).find('a').attr('value');
    $(this).parents('tr').remove();
}

And then call.off to before calling.on to prevent multiple listeners

$('.toggle-voicemail').off('change', myFunc);
$('.toggle-voicemail').on('change', myFunc);

Answer 2

You're binding this event inside of your "add row" functionality:

$('.toggle-voicemail').on('change', function(event) {

Which means every time you add a row, you're adding another binding to every matching .toggle-voicemail element on the page, including the ones which already have that event binding.

Instead of re-binding when adding a row, create a delegated binding once when the page loads that handles dynamically added elements. Basically, do this outside of the "add row" functionality:

$(document).on('change', '.toggle-voicemail', function(event) {
    event.preventDefault();
    var id = $(this).parents('tr').attr('id');
    console.log("Voicemail for userID:"+id);
});

Answer 3

That is caused because every time you add a new toggle, you reattach the event listener to all of the existing toggles and not only for the newly created one.

You can make a let variable to store the newly generated toggle, and then instead of doing

$('.toggle-voicemail').on('change', function(event) { ...

you can do:

$elem.on('change', function(event) { ...

Answer 4

It looks like your problem is that you are just adding event handlers and never removing them. So you need to only add an event handler to the newly-added element, or remove all event handlers (using .off() ),and then adding them again.

I would opt for the former approach (adding an event listener to the new element only).

The best way to do this is the create the elements, then add all your event handlers (and whatever else you want to change about the element). THEN append it to the DOM.

so:

// create the new row.
// reusing your `.join()` technique for ease of demo here.
var newRow = $("<tr class='userRow' id='"+rowID+"'>",
        "<td>"+rowID+"</td>",
        "<td><input type='text' class='form-control'></td>",
        "<td><input type='text' class='form-control'></td>",
        "<td><input type='text' class='form-control'></td>",
        "<td><input type='checkbox' class='toggle-voicemail' data-toggle='toggle'></td>",
        "<td><input type='checkbox' data-toggle='toggle' class='toggle-ringgroup'></td>",
        "<td><input type='checkbox' data-toggle='toggle' class='toggle-ringgroup'></td>",
        "<td><input type='checkbox' data-toggle='toggle' class='toggle-ringgroup'></td>",
        "<td><a class='deleteRow btn btn-danger' value='"+rowID+"'>Delete</a></td>",
      "</tr>".join(''));

// toggle-ify the element.
newRow.find("[data-toggle='toggle']").bootstrapToggle({ size: 'small' });

newRow.find('.toggle-voicemail').on('change', function(event) {
    event.preventDefault();
    var id = $(this).parents('tr').attr('id');
    console.log("Voicemail for userID:"+id);
});

newRow.find('a.deleteRow').on('click', function(event) {
    event.preventDefault();
    //var id = $(this).find('a').attr('value');
    $(this).parents('tr').remove();
});

// append to table.
$('#users').find('tbody').append(newRow);