插件内的单击事件多次触发答案

【问题标题】：click event inside plugin firing multiple time插件内的单击事件多次触发
【发布时间】：2015-05-29 09:53:51
【问题描述】：

这是我自己的插件的一个例子。

当field1为点击数据时来自表1。
当field2为click时，数据来自表2。
现在当我点击“点击我”按钮点击事件触发多个

次。请帮忙

这是我的html代码文件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>

【问题讨论】：

因为这是我自己的插件示例，表1表2的数据来自服务器端
每次调用jQtable()，都是在向#secondClick添加点击事件
我知道这是我的插件 A Wolff 的要求
但这就是为什么Now when i click on "Click me" button click event firing multiple times. 所以不，不是。 Satpal 使用一些上下文提供相关答案以避免它;)
好的，我需要在插件内部每次点击时使用表名并使用该名称获取记录你有什么解决方案吗？？？？

标签： jquery html jquery-plugins

【解决方案1】：

您应该使用self 对象而不是body 绑定事件。

修改后的代码

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>

【讨论】：

是的，因为我每次点击都需要表名，并将这个名称与插件一起传递
@daulat，很高兴我能帮上忙