創建在JavaScript的元素，然後使用jQuery動畫

Question

我已經創建了一個noty通過javascript其中I中所用的幾個要素：

     var n = noty({ 
        layout: 'centerRight', 
        theme: "defaultTheme", 
        text: "<img class='item' src='images/emark.png' width='30' height='30'/>" + count, 
        type: 'alert', 
        template: "<a id='noty' title='Click Here to see all recent alerts' href='alertjquery.html' target='_blank'><div id ='noty_message'><span class='noty_text'></span></div></a>", 
        closeWith: ['button'], 
        dismissQueue: true, 
        timeout: false 
       });  

我用jquery的動畫放大略圖像上：

$('noty').hover(function() { 


      width = $('.item').width() * zoom; 

      height = $('.item').height() * zoom; 

      $(this).find('.item').stop(false, true).animate({ 'width': width, 'height': height, 'top': move, 'left': move }, { duration: 300 }); 


     } 

我想要發生的事情是，當您將鼠標懸停在標記爲noty的noty上時，圖像內部會略微放大。我相信不要緊，我使用它應該工作的noty，通常反正

Answer 1

你錯過#到目標元素由id：

$('#noty') 

此外，由於你的元素是動態創建，你需要使用event delegation：

$('body').on("hover","#noty",function(){ 
    //some operation 
}); 

另外一個需要注意的是，hover()採取兩種處理程序即被啓動，當你鼠標和鼠標你的元素。因此，當您將鼠標移出元素時，您可能還需要處理這種情況。

Answer 2

你應該使用event delegation爲

$(document).on("hover","#noty",function(){ 
    width = $('.item').width() * zoom; 

     height = $('.item').height() * zoom; 

     $(this).find('.item').stop(false, true).animate({ 'width': width, 'height': height, 'top': move, 'left': move }, { duration: 300 }); 
}); 

它可以幫助你附加的處理程序未來元素