javascript - 回发后更新面板内的 Owl Carousel 消失

Question

我有转发器控件来显示一些东西。

<div class="owl-carousel trend" style="height:20px;">
    <asp:Repeater ID="rptThing" runat="server" DataSourceID="yyy">
        <ItemTemplate>
            <asp:LinkButton ID="lnkEtiket" runat="server" OnClick="lnkEtiket_Click">go</asp:LinkButton>
        </ItemTemplate>
    </asp:Repeater>
</div>

它位于更新面板内。页面加载没有问题，但是当 onClik 时它消失了。我知道关于 ajax 和 jquery 的问题，但我无法解决问题。我尝试了很多例子。这是我的 jquery

<script type=text/javascript>
    var owltrend = $('.trend');
    owltrend.owlCarousel({
        margin: 5,
        loop: true,
        startPosition: 0,
        lazyLoad: true,
        rtl: false,
        nav: false,
        autoWidth: true,
    });
</script>

注:其 Owl Carousel 2

Answer 1

您需要再次触发 jQuery 绑定(bind)。

<script type="text/javascript">
    $(document).ready(function () {
        createCarousel();
    });

    var prm = Sys.WebForms.PageRequestManager.getInstance();

    prm.add_endRequest(function () {
        createCarousel();
    });

    function createCarousel() {
        var owltrend = $('.trend');
        owltrend.owlCarousel({
            margin: 5,
            loop: true,
            startPosition: 0,
            lazyLoad: true,
            rtl: false,
            nav: false,
            autoWidth: true,

        });
    }
</script>

prm.add_endRequest 在 UpdatePanel 完成加载时触发。