幫助您理解如何在運行中創建的新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 );
});