Question

我通过javascript创建了一个noty，其中我使用了几个元素：

                       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 animate稍微放大图像：

 $('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来定位元素{/ 1}}：

$('#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 });
});

它可以帮助您为未来元素附加处理程序

在javascript中创建一个元素，然后使用jquery animate

2 个答案: