1

我正在开发这个插件

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>

查询

(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/

4

3 回答 3

2

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

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

DEMO

于 2013-11-12T10:23:08.453 回答
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();
});

更新了 JSBin

于 2013-11-12T10:24:42.073 回答
2

加载插件时，您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);               
        }
    });
}
于 2013-11-12T10:25:12.710 回答