UpdatePanel ломает скрипт JQuery

Question

Это упрощенная версия того, что я хочу сделать. По сути, у меня есть список данных с кучей вещей, и когда вы наводите курсор мыши на элементы списка данных, я хочу, чтобы jquery скрывал / показывал вещи. Проблема заключается в том, что после привязки данных мой jridery сетки / ретранслятора / списка данных перестает работать, если сетка / репитер / список данных находится на панели обновления.

После того, как вы нажмете кнопку в примере ниже, jquery, который заставляет диапазон отображаться, когда вы наводите курсор мыши, перестает работать.

Любые идеи о том, почему это происходит, как это исправить или лучший способ сделать это?

   <script type="text/javascript">
                $(document).ready(function() {
                    $('.comment-div').mouseenter(function() {
                        jQuery("span[class=mouse-hide]", this).fadeIn(50);
                    });
                    $('.comment-div').mouseleave(function() {
                        jQuery("span[class=mouse-hide]", this).fadeOut(50);
                    });
                });
            </script>

            <asp:UpdatePanel ID="UpdatePanel1" runat="server">
                <ContentTemplate>
                    <div class="comment-div">
                        <asp:GridView ID="GridView1" runat="server">
                        </asp:GridView>
                        <span class="mouse-hide" style="display: none;">sdfgsdfgsdfgsdfg</span>
                    </div>
                    <asp:Button ID="Button1" runat="server" Text="Button" OnClick="Button1_Click" />
                </ContentTemplate>
            </asp:UpdatePanel>

И код позади:

 protected void Page_Load(object sender, EventArgs e)
    {
        if (!Page.IsPostBack)
        {
            BindStuff();
        }
    }
    public void BindStuff()
    {
        TestDB db = new TestDB();
        var x = from p in db.TestFiles
                select new { p.filename};
        x = x.Take(20);
        GridView1.DataSource = x;
        GridView1.DataBind();
    }
    protected void Button1_Click(object sender, EventArgs e)
    {
        BindStuff();
    }

Answer 1

Причина, по которой это происходит, заключается в том, что элементы управления воссоздаются при частичной обратной передаче.Используйте функцию «live» в jQuery, поэтому переписайте свой код так:

$(document).ready(function() {
    $('.comment-div').live('mouseenter',function() {
        jQuery("span[class=mouse-hide]", this).fadeIn(50);
    });
    $('.comment-div').live('mouseleave', function() {
        jQuery("span[class=mouse-hide]", this).fadeOut(50);
    });
});

Answer 2

Когда UpdatePanel обновляется, он полностью заменяет все элементы DOM, к которым вы ранее подключили обработчики событий.Самое простое решение - инициализировать ваши обработчики событий в pageLoad () вместо $ (document) .ready () .Его код будет выполняться как при начальной загрузке страницы, так и после каждого обновления UpdatePanel.

Лучшее решение - изменить код на использование live () или делегат () , чтобы на обработчики событий не влияли периодические изменения содержимого страницы.

Answer 3

См. Ниже для различных версий jQuery:

$( selector ).live( events, data, handler );                // jQuery 1.3+
$( document ).delegate( selector, events, data, handler );  // jQuery 1.4.3+
$( document ).on( events, selector, data, handler );        // jQuery 1.7+

Answer 4

Когда вы выполняете обратную передачу AJAX с помощью панели обновления, DOM внутри нее удаляется и воссоздается при получении ответа AJAX.Прикрепленные вами обработчики теряются, если вы не используете метод live или livequery library