Question

好的，这是我的javascript：

$().ready(function (){
$(".contact").hover(function (){
    ...
});
$(".contact").not('.contact[id="'+activeId+'"]').click(function (){
    ...
});
$(".contact_chooser_contact").click(function (){
    ...
    $('.contacts').append('<div class="contact" id="'+id+'" title="'+phone+'">\
                                <div class="contact_img"><img src="src/default_face.png" width="64"/></div>\
                                <div class="contact_info" id="'+name+'">'+name+' <span class="sms_number">0</span></div>\
                                <div class="contact_last_sms">\
                                \
                                <!-- span class="last_sms_time"> echo $message[sizeof($message)-1]->time; </ -->\
                                </div>\
                            </div>');           
    ...
});
});

注意，在“contact_chooser_contact”点击处理程序中，我在“.contacts”中添加了另一个“.contact”，但现在当我将鼠标悬停在新的“.contact”上时，它并没有像它应该做的那样做。我怎么能解决这个问题，我明白这是因为我在添加新的“.contact”之后没有重新启动'$（“。contact”）。hover（）'，但有更简单的方法吗？

Answer 1

您需要使用on()绑定事件，使用此方法将使用相应选择器绑定添加到DOM的任何元素。使用on()优于live()的优点是，您可以将上下文缩小到特定容器，而不是整个document。在我的示例中，我只使用document作为上下文。

jQuery 1.7 使用on()

$(document).on('mouseover', '.contact', function(){
  ...
});

小于 1.7 ，请使用delegate()

$(document).delegate('.contact', 'mouseover', function(){
   ...
});

小于 1.4.2 ，请使用live()

$('.contact').live('mouseover', function(){
   ...
});

Answer 2

“。联系人”在文件上传时添加事件。之后，从“.contact”事件中添加的div实际上没有事件。因为click事件不会再次执行。

你可以这样做：

function addDiv(div) {
    div.hover(function() {
        ...
    });
}

$(function() {

    addDiv($(".contact"));

    $(".contact_chooser_contact").click(function (){
        addDiv($('<div/>').addClass('.contact').attr({id:ID, title: TITLE}).append(...));
    });
});

添加新div时，jQuery事件失败

2 个答案: