Question

我正在处理这个插件

HTML

<span class="item" data-item="first">
</span>   
<br><br>  

<span class="item" data-item="second">
</span>    
<br><br>    

<span class="item" data-item="third">
</span>

JQUERY

(function($){
  $.fn.myPlugin = function(){    
    return this.each(function(){

          for (var i = 1; i <= 2; i++) {
            $(this).append('<span class="act" title="active '+i+'">act'+i+'</span><br>');
        }        

          $('.act').bind({
        mouseover :function(){  
          var item=$(this).parent().attr('data-item');
          alert(item);               
        }             

      });          

    });
  };
})(jQuery);

$(document).ready(function()
{
$('.item').myPlugin();

});

当我悬停在行动时，它会发出3次警报，即。它下面的.item数量。问题出在这里？

演示http://jsbin.com/IWutoQa/1/

Answer 1

您绑定到每个.act元素，您位于each()方法内，因此您已经在遍历项目。您只需要绑定循环中当前项的.act，一种方法是将$(this)与children()一起使用：

$(this).children('.act').bind({
  mouseover :function(){  
  var item=$(this).parent().attr('data-item');
  alert(item);
}

DEMO

Answer 2

您正在为每个循环中的每个.act元素添加一个鼠标悬停处理程序。相反，使用单个委托处理程序：

(function($){
    $.fn.myPlugin = function(){
        $(this).on('mouseover', '.act', function(){  
            var item = $(this).parent().attr('data-item');
            alert(item);           
        });    

        return this.each(function() {    
            for (var i = 1; i <= 2; i++) {
                $(this).append('<span class="act" title="active '+i+'">act'+i+'</span><br>');
            }   
        });
    };
})(jQuery);

$(document).ready(function() {
    $('.item').myPlugin();
});

Updated JSBin

Answer 3

在加载插件时，每个act跨度都附加item范围。对于每个行为范围，您将绑定触发警报的mouseover事件。如果您只希望这种情况发生一次，则应该按ID而不是Class绑定事件。

即。附加的HTML变为：

$(this).append('<span id="act'+i+'" class="act" title="active '+i+'">act'+i+'</span><br>');

然后你将for循环中的事件绑定到ID。

for (var i = 1; i <= 2; i++) {
    $(this).append('<span id="act'+i+'" class="act" title="active '+i+'">act'+i+'</span><br>');
    $('#act' + i).bind({
        mouseover :function(){  
          var item=$(this).parent().attr('data-item');
          alert(item);               
        }
    });
}

警报使用插件运行多次

3 个答案: