Jquery動態產生DOM綁定事件


#1

各位大大好,
目前有個需求是滑鼠hover過跟離開都會有一個效果,原本可以簡單的用hover事件做到
但是目前會改成動態產生DOM的方式,就必須要用document.on來綁定事件才有辦法做到
目前小弟用了一個方式解決

  $(document).on("mouseover", '.product i', function(){
    $('.product_info').addClass('active');
  });

  $(document).on("mouseout", '.product i', function(){
    $('.product_info').removeClass('active');
  });

但是這樣就變成偵聽兩次事件,請問各位大大是否有更好的寫法可以直接類似像hover那樣,有滑鼠移入跟移出的事件,動態產生出來的DOM又可以綁定到這事件上呢


#2

試試看直接使用 CSS 選擇器 :hover


#3

同上,david 的是正解,單純幫忙補完,類似你可以寫成

.product i .product_info{
  background:none;
}
.product i:hover .product_info{
  background:#f00;
}

也就是 hover 寫前段,但這前提是同一包裝下,如果不是父子關係的話就比較麻煩(跨包裝用 CSS 有瀏覽器支援度的問題 … 記得還是有方法可以玩就是,還是用 JS 方便點),但並非不能解,單純你要動態產生後就必須要綁才行,類似

function action_me(obj , is_mouse_over){
  if(is_mouse_over){
    obj.addClass('active');
  }else{
    obj.removeClass('active');
  }
}
var temp_dom = $('<div class="product_info">demo</div>').mouseover(function(){
  action_me($(this) , true);
}).mouseout(function(){
  action_me($(this) , false);
});
$('body').append(temp_dom);

不過老實說和你當初寫的東西差不多就是了,單純建議產生後就綁,然後才塞即可,不然就是產生後去 callback 一個 function,類似

function temp_me(){
  $('.product i').unbind('mouseover').unbind('mouseout').bind('mouseover' , function(){
    $('.product_info').addClass('active');
  }).bind('mouseout' , function(){
    $('.product_info').removeClass('active');
  });
}

重新包裝也行,大概就這樣唄