帮助您理解如何在运行中创建的新dom元素上执行javascript背后的逻辑

Question

我有一个这样的设置

<ul>
<li>item 1</li>
</ul>

我的js让我可以对它们进行排序，而没有，我的一个功能是可以通过ajax即时创建一个新的列表项。 但是有趣的是，我有一个hoverIntent可以将我悬停在列表项上，并且出现一个删除和编辑图标可以让我执行预期的操作。

我的问题是，当我即时创建一个新列表项时，hoverIntent并未应用到它。 创建的代码与其他列表项相同，我知道它是有效的，因为当我刷新页面并重新加载js时，hoverIntent就会起作用，并将悬停效果应用于所创建的新项目。

这些都不是即时运行的，我该如何做呢？

我的用于创建新列表项的js是：

var timestamp = 0;
    $('.new-group').click(function(e){

        // Only one group per 5 seconds is allowed:
        if((new Date()).getTime() - timestamp < 5000) return false;

        $.get("resources/ajax/groups.ajax.php",{
            action :'new',
            uid     : uid,
            text   :'New Group, Doubleclick to Edit.'
        },function(data){
            $(data).hide().appendTo('.grouplist').fadeIn();
            //GROUP.find(".groups-action-div").show('slow');
        });
        timestamp = (new Date()).getTime();
        e.preventDefault();
    });

我敢打赌，在我的成功职能中，我可以完成这项工作，

您可以登录并在www.helixagent.com上查看我的问题，并以test / password身份登录进入“联系人”选项卡，然后单击“ +”图标以创建一个新群组

Answer 1

hoverIntent会在页面加载时加载效果，这意味着在创建新元素时，您已经执行了hoverIntent方面，并且不适用于新创建的元素。

基本上，您只需要再次运行hoverIntent

我尚未测试过，但是您需要执行以下操作：

var timestamp = 0;
$('.new-group').click(function(e){

    // Only one group per 5 seconds is allowed:
    if((new Date()).getTime() - timestamp < 5000) return false;

    $.get("resources/ajax/groups.ajax.php",{
        action :'new',
        uid     : uid,
        text   :'New Group, Doubleclick to Edit.'
    },function(data){
        $(data).hide().appendTo('.grouplist').fadeIn();
        //GROUP.find(".groups-action-div").show('slow');
    });
    timestamp = (new Date()).getTime();
    e.preventDefault();


    var config_names = {
        over: show_delete_names,
        timeout: 200,
        out: hide_delete_names
    };
    $(".contactlist li:last-child").hoverIntent( config_names );
});