click event inside plugin firing multiple time

Question

This is an example of my own plugin.

• When field1 is click data comes from table 1.

• When field2 is click data comes from table 2.

• Now when i click on "Click me" button click event firing multiple

  times. Please Help

This is my html code file index.php

<div><a href="#"  tableName="table1" id="field1">Field 1</a><br><br></div>
<div><a href="#" tableName="table2" id="field2">Field 2</a><br><br></div>

<!-- feedback of each click event -->
<div id="table">
</div>
<!-- plugin.js file code -->
<script>
        (function($){
 $.fn.jQtable = function(options){  
          var self=$(this);

          var settings = $.extend({
            tableName:'table',
          }, options );
          self.html('<a href="#" id="secondClick">Click me</a> <br>'+settings.tableName);
          $('body').on('click', '#secondClick', function(event) {
            event.preventDefault();
            alert('works!');
          });

      };
 }(jQuery));
</script>
<!-- main.js file -->
<script type="text/javascript">

$('#field1').on('click', function(event) {
    event.preventDefault();
    var self=$(this);
    var tableName=self.attr('tableName'); // get table name
$('#table').jQtable({
    tableName:tableName // send table name
});

});
$('#field2').on('click', function(event) {
    event.preventDefault();
    var self=$(this);
    var tableName=self.attr('tableName');
$('#table').jQtable({
    tableName:tableName
});

});
</script>

Answer 1

You should bind event with self object instead of body.

Modified code

self.html('<a href="#" class="secondClick">Click me</a> <br>' + settings.tableName);
$('.secondClick', self).on('click', function(event) {
  event.preventDefault();
  alert('works!');
});

(function($) {
  $.fn.jQtable = function(options) {
    var self = $(this);
    var settings = $.extend({
      tableName: 'table',
    }, options);
    self.html('<a href="#" class="secondClick">Click me</a> <br>' + settings.tableName);
    $('.secondClick', self).on('click', function(event) {
      event.preventDefault();
      alert('works!');
    });
  };
}(jQuery));
$('#field1').on('click', function(event) {
  event.preventDefault();
  var self = $(this);
  var tableName = self.attr('tableName'); // get table name
  $('#table').jQtable({
    tableName: tableName // send table name
  });
});
$('#field2').on('click', function(event) {
  event.preventDefault();
  var self = $(this);
  var tableName = self.attr('tableName');
  $('#table').jQtable({
    tableName: tableName
  });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div><a href="#" tableName="table1" id="field1">Field 1</a>
  <br>
  <br>
</div>
<div><a href="#" tableName="table2" id="field2">Field 2</a>
  <br>
  <br>
</div>

<!-- feedback of each click event -->
<div id="table">
</div>