使用Ajax从JSON文件加载内容时，不会对div产生影响。

Question

我已经创建了一个无序列表，就像在此示例中一样-DirectionAwareHoverEffect 。

因为我可能有很多内容，所以我决定使标记自动化。 我将内容包含在JSON文件中。 使用以下代码加载文件。

$.ajax({
    //cache: false,
    url: "../content/"+"benefits.json",
    dataType: "json",
    success: function(data) {
        var rows = data.rows;
        var item = '<ul id="da-thumbs" class="da-thumbs">';
        $.each(rows, function(idx, obj) {
            item += '<li><a class="hvr-float"><img src="' + obj.image + '" /><div><span>' + obj.title + '</span></div></a></li>';
        });

        item += '</ul>';

        $("#benefits-container").html(item);
        }
});

但是，这样做之后，JS效果将不再起作用，并且在使用调试工具时看不到任何错误。

DirectionAwareHoverEffect的JS效果（根据教程）是使用此代码完成的

$('#da-thumbs > li ').each( function() { 
    $(this).hoverdir({
         hoverDelay : 0
    }); 
} );

当然，此代码调用源代码中给定的自己的库。

我在$（window）.load（）函数中包含了内容加载功能，在$（document）.ready（）函数中包含了JS效果。 但是我没有任何效果。

任何帮助都感激不尽。

Answer 1

您要么需要使用类似于on（）的委托，要么需要在ajax调用和元素附加之后调用插件。

因此，在此行之后

$("#benefits-container").html(item);

做

$('#da-thumbs > li ').each( function() { 
    $(this).hoverdir({
         hoverDelay : 0
    }); 
} );

或尝试看看是否可以像

$(document).on('hoverdir', '#da-thumbs > li', function(){
         return {hoverDelay : 0}
    })); 
$('#da-thumbs > li ').each( function() { 

} );

请注意，上述委托建议可能不正确％100，因为我不确定如何绑定到自定义事件（并且现在无法查找，抱歉:)）。