jQuery的 - 如何我添加一個事件後動態創建

Question

我動態創建一個div，然後將其附加到容器：

var str = '<div class="dimsdiv" id="'+dim.src+'" cursor:pointer;"></div>'; 
$('#fpdiv').append(str); 

現在我需要一個懸停增加，甚至那些div的。我試圖引用它，但後來發現我需要考慮.on（）。我試過這個（之前）：

$('#'+dim.src).hover(function{},function{}); 

但如預期，這並沒有奏效。我也試過這個：

$('#'+dim.src).on('hover','(function{},function{})'); 

但似乎無法得到正確的語法。有人可以幫忙嗎？ 在此先感謝。

Answer 1

你可以試試這個

var str = $('<div/>', { 
    text:'Hello', 
    class:'dimsdiv', 
    id:'dim_src', 
    style:'cursor:pointer', 
    mouseenter:function(){ ... }, 
    mouseleave:function(){ ... } 
}); 
$('#fpdiv').append(str); 

還能去除.從dim.src，而是使用dim_src作爲id，它用作jQuery的class選擇，不知道爲什麼你使用它壽，但$('#'+dim.src)是無效的。

DEMO。

Answer 2

.on('hover',' has been deprecated in the latest jQuery version.. 

您需要使用委託事件來完成該操作。將事件添加到父容器。

第二種方法是增加的事件一旦元件被創建

$(function() { 
    var addEvent = function() { 
     $('.dimsdiv').unbind().hover(function {}, function {}); 
    } 

     // Lets say you are creating your div's here 
     $('#btn').on('click', function() { 
      // Create Div 
      var str = '<div class="dimsdiv" id="'+dim.src+'" cursor:pointer;"></div>'; 
      $('#fpdiv').append(str); 

      // Call the function here 
      addEvent(); 

     }); 
});​ 

Answer 3

可以用於動態創建的元素使用delegated-events approach和綁定懸停事件（即mouseenter和mouseleave）與類「dimsdiv」和與ID 「fpdiv」父元素：

$("#fpdiv").on({ 
    mouseenter : function() { 
     // hover on 
    }, 
    mouseleave : function() { 
     // hover off 
    } 
}, ".dimsdiv"); 

Answer 4

速記hover人在1.8中刪除了on。您可以改用hover()方法。它接受一個或兩個函數作爲參數來處理懸停和懸停事件。

$('#'+dim.src).hover(
    function() { 
    // hover in code here 
    }, 
    function() { 
    // hover out code here 
    } 
); 

Answer 5

你需要的是一個實時功能，所以你可以設置它一次，它會影響你的動態HTML。

http://api.jquery.com/live/