jquery - 动态更改div内容后如何应用jQuery扩展器？

我有一个包含一些内容的 div。 jQuery 扩展器应用于它。一段时间后，div 的内容将通过 ajax 调用进行更改。如何在 jquery .done() 中再次将扩展器应用于 div？

$(document).ready(function(){
    $('div.expandable').expander({
    slicePoint: 200,
    preserveWords: true,
    widow: 4,
    expandText: 'continue reading',
    detailClass: 'expanderDetails',
    afterExpand: function(){
        $('#mybutton').click(); //simulate a different click.
    }
});

div.expandable 的内容由 ajax 请求更改。一旦发生，我就会失去“阅读更多”功能。我想在 request.done() 上将扩展器效果应用回 div。如何实现这一目标？只是运行这个不起作用:

$('div.expandable').expander();

最佳答案

首先，您应该将扩展器代码包装到一个函数中:

function initExpander() {
    $('div.expandable').expander({
        slicePoint: 200,
        preserveWords: true,
        widow: 4,
        expandText: 'continue reading',
        detailClass: 'expanderDetails',
        afterExpand: function(){
            $('#mybutton').click(); //simulate a different click.
        }
    });
}

然后你可以在每次需要初始化扩展器时使用这个函数，例如在 DOM 加载之后:

$(document).ready(function() {
    initExpander();
});

或者在 ajax 调用之后:

$.ajax({
    url: '/doajax',
    // .... your ajax request here
    success: function () {
         initExpander();
    }
});

如果您在 ajax 中使用 done() ，也可以:

$.ajax({
    url: '/doajax',
    // .... your ajax request here
}).done(function () {
    initExpander();
});

希望这可以帮助 ;)

关于jquery - 动态更改div内容后如何应用jQuery扩展器？，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/17415504/