Question

我为练习制作了一个小插件。但是在点击第一个跨度时，它会在控制台中打印两次。 fiddle

$.fn.sample= function(options){
  var setting= $.extend({
    d:false
  }, options)
  $(this).append($('<span/>').attr({id:'jitender'}).text('hi click me'))
  $('span').click(function(){
    if(setting.d)
      console.log(1)
    else
      console.log(2)
  })
  return this
}
$(function(){
  $('div.one').sample({
    d:true
  })

  $('div.two').sample({
    d:false
  })
})

Answer 1

每次调用sample时，都会将click事件添加到所有span标记中。我希望你真的想要这样的东西：

var clickSpan = $('<span/>').attr({id:'jitender'}).text('hi click me');
$(this).append(clickSpan);
clickSpan.click(function(){
    if(setting.d)
      console.log(1);
    else
      console.log(2);
});

http://jsfiddle.net/583vN/3/

Answer 2

$('span').click会将自己附加到所有span标记。

变化：

$('span').click(function()

要：

$(this).click(function()

JSFiddle

Answer 3

每次调用插件时，您都会在所有<span>上设置事件处理程序。您可以通过更简单地使用插件中的处理程序来修复此问题，更改：

  $('span').click(function(){
    if(setting.d)
      console.log(1)
    else
      console.log(2)
  })

如果在click的{{1}}上执行此操作，则会设置两个处理程序，每个处理程序都会被调用。

将上述内容更改为以下内容（将点击甚至限制为在上调用插件的元素中的跨度）：

<span>

请参阅此JSBin

Answer 4

因为您已将两个事件处理程序附加到该范围...

这是因为当你打电话给$('span').click(...)时 - 你正在将通气处理程序附加到文件中的所有范围......

如果您只想将它附加到您应用示例插件的div中，请写：$('span', this).click(...)

为什么在jquery中单击事件调用两次

4 个答案: