Question

在我的项目中，您可以点击一个区域，它的县徽出现在底部。

我有一些jquery悬停在新添加的波峰上，我想在他们的类上使用选择器。每个徽章都添加：

$("#selectResult").append("<div id='"+arr[this.id]+"' class='inline'></div>");
var addThis = arr[this.id];
$("#" + addThis).css({'background-image' : 'url(./coatofarms/'+arr[this.id]+'.png)',
'background-repeat': 'no-repeat',
'background-position': 'bottom'});

我的jquery测试悬停是：

 $(".inline").hover(function(){
         alert('in');
}, function(){
         alert('out');
});

该类是.inline但是select不起作用（？）测试div ID并且它完美地工作。有人可以告诉我哪里出错了吗？ TIA

Answer 1

当你.inline动态附加到DOM时，普通绑定在这里不起作用。您需要委托事件处理程序执行如下操作：

$('#selectResult').on('hover', '.inline', function(e) {
   if(e.type == "mouseenter") {
      alert('In');
   } else {
      alert('Out');
   }
});

委托事件处理程序的

.on()方法需要使用如下：

$(container).on(eventName, target, handlerFunction);

这里，container指向静态元素的元素，即在页面加载时属于DOM，不动态追加。尽量避免将document或body作为container引用。

Answer 2

如果您正在动态添加您需要设置委托的元素，以便在这种情况下将给定元素订阅到一个或多个事件。

使用jQuery on()

类似的东西：

$(document).on('mouseover mouseout', '.inline', function(e){
      if(e.type == 'mouseover')
      {
         alert('in');
      }
      else if(e.type == 'mouseout')
      {
          alert('out');
      }
});

Answer 3

试试这个：

$(".inline").live("mouseenter",function(){
         alert('in');
}).live("mouseleave", function(){
         alert('out');
});

css类选择器不工作，不知道为什么

3 个答案: