javascript - 使用 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()这样的委托(delegate)或者您需要在 ajax 调用和附加元素之后调用插件。

所以，在这行之后

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

做

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

或者尝试看看是否可以像这样进行委托(delegate)

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

} );

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