Hello Sir, I have a project like Ecommerce website. tgere i have updatepanel which contains a datalist with repeater Like as Follow,

Here when I Click On Increase or Decrease button which is in the repeater in datalist, then images which is related to Owl Carousel got disapper. In short owl carousel used in Datalist doesn't work with Updatepanel but it works fine without updatepanel. I have used js & css file for owl-carousel.

<link href="css/owl.carousel.css" rel="stylesheet">

<script src="js/owl.carousel.js"></script>

How can I fix it??

<asp:UpdatePanel ID="Up1" runat="server">
    <ContentTemplate>
        <asp:DataList ID="DatListProduct" CssClass="thumbnail panel" runat="server" Font-Size="Medium" RepeatDirection="Horizontal" RepeatLayout="Flow" OnItemCommand="DatListProduct_ItemCommand">
            <ItemTemplate>
                <div class="col-md-3">
                    <asp:Label ID="lblProdName" Font-Bold="true" runat="server" Text='<%# Eval("Pname")%>'></asp:Label>
                    <asp:Label ID="lblProdPcode" runat="server" Visible="false" Text='<%# Bind("Pcode") %>'></asp:Label>

                    <div id='<%# string.Format("owl-demo" + Container.ItemIndex) %>' class="owl-carousel text-center">
                        <asp:Repeater ID="InnerRepeater" runat="server">
                            <ItemTemplate>
                                <div class="item">
                                    <asp:Image ID="ImgProdImg" CssClass="lazyOwl img-thumbnail" runat="server" ImageUrl='<%# string.Format("http://admin.zippcobiz.com/Gallery/{0}", Eval("ImgName"))%>' Height="280px" Width="230px" />
                                </div>
                            </ItemTemplate>
                        </asp:Repeater>
                    </div>

                    <script>
$(document).ready(function () {
    $('<%# string.Format("#owl-demo" + Container.ItemIndex) %>').owlCarousel({
        items: 1,
        lazyLoad: true,
        autoPlay: true,
        pagination: true,
        nav: true,
    });
});
</script>
                    <div class="col-sm-12" style="text-align: left">
                        <span style="text-align: left">Price:
                            <i class="fa fa-rupee"></i>
                            <asp:Label ID="lblDP" runat="server" Font-Bold="true" Text='<%# Bind("DP") %>'></asp:Label>
                            &nbsp;
                            <i style="text-decoration: line-through" class="fa fa-rupee"></i>
                            <asp:Label ID="lblMRP" runat="server" Font-Bold="false" Font-Strikeout="true" Text='<%# Bind("MRP") %>'></asp:Label>
                        </span>
                    </div>

                    <div class="col-md-4 col-lg-4 col-sm-4 col-xs-4" style="text-align: right">
                        <asp:Button ID="btnDcr" runat="server" class="btn-success" Font-Bold="true" Text="-" Width="30px" CommandName="Decrease" />
                    </div>
                    <div class="col-md-4 col-lg-4 col-sm-4 col-xs-4" style="text-align: center">
                        <asp:TextBox ID="txtqty" runat="server" Text="0" CssClass="form-control" Enabled="false" Font-Bold="true"></asp:TextBox>
                    </div>
                    <div class="col-md-4 col-lg-4 col-sm-4 col-xs-4" style="text-align: left">
                        <asp:Button ID="btnIncr" runat="server" class="btn-success" Font-Bold="true" Text="+" Width="30px" CommandName="Increase" />
                    </div>

                </div>
            </ItemTemplate>
        </asp:DataList>
        <link href="css/owl.carousel.css" rel="stylesheet">
        <script src="js/owl.carousel.js"></script>
    </ContentTemplate>
</asp:UpdatePanel>