UpdatePanel的打破jQuery脚本 [英] UpdatePanel Breaks JQuery Script

问题描述

这是我想要做一个简化版本。基本上我有与它一堆东西DataList控件，当你在DataList控件将鼠标放置物品我想jQuery来隐藏/显示的东西。问题是，我的数据绑定后，我的GridView的/中继器/ DataList控件jQuery的退出，如果在GridView /中继器/ DataList控件是一个更新面板的工作。

在单击下面的示例中的按钮，这使得跨度展现出来了jQuery当你的鼠标在停止工作。

为什么发生这种情况的任何想法，如何解决它，或者更好的方式来做到这一点？

 ＆LT;脚本类型=文/ JavaScript的＆GT;
                $（文件）。就绪（函数（）{
                    $（'。评论-DIV'）。的mouseenter（函数（）{
                        jQuery的（跨度[CLASS =鼠标隐藏]，这一点）.fadeIn（50）;
                    }）;
                    $（'。评论-DIV'）。鼠标离开（函数（）{
                        jQuery的（跨度[CLASS =鼠标隐藏]，这一点）.fadeOut（50）;
                    }）;
                }）;
            ＆LT; / SCRIPT＆GT;

            ＆LT; ASP：UpdatePanel的ID =UpdatePanel1=服务器＆GT;
                ＆LT;的ContentTemplate＆GT;
                    ＆LT; D​​IV CLASS =评论-DIV＆GT;
                        ＆LT; ASP：GridView控件ID =GridView1=服务器＆GT;
                        ＆LT; / ASP：GridView控件＆GT;
                        ＆LT;跨度类=鼠标隐藏的风格=显示：无;＆GT; sdfgsdfgsdfgsdfg＆LT; / SPAN＆GT;
                    ＆LT; / DIV＆GT;
                    ＆LT; ASP：按钮的ID =Button1的=服务器文本=按钮的OnClick =的button1_Click/＆GT;
                ＆LT; /的ContentTemplate＆GT;
            ＆LT; / ASP：UpdatePanel的＆GT;
 

而code-背后：

 保护无效的Page_Load（对象发件人，EventArgs的）
    {
        如果（！Page.IsPostBack）
        {
            BindStuff（）;
        }
    }
    公共无效BindStuff（）
    {
        TestDB的DB =新TestDB的（）;
        VAR X =从p在db.TestFiles
                选择新{p.filename};
        X = x.Take（20）;
        GridView1.DataSource = X;
        GridView1.DataBind（）;
    }
    保护无效的button1_Click（对象发件人，EventArgs的）
    {
        BindStuff（）;
    }
 

解决方案

这是发生的原因是因为得到控制上重新创建一个局部回传。使用jQuery的实时功能，让您重写code这样的：

  $（文件）。就绪（函数（）{
    $（'。评论-DIV'）。住（'的mouseenter'，函数（）{
        jQuery的（跨度[CLASS =鼠标隐藏]，这一点）.fadeIn（50）;
    }）;
    $（'。评论-DIV'）。住（鼠标离开'，函数（）{
        jQuery的（跨度[CLASS =鼠标隐藏]，这一点）.fadeOut（50）;
    }）;
}）;
 

This is a simplified version of what I want to do. Basically I have a datalist with a bunch of stuff in it and when you mouseover items in the datalist I want jquery to hide/show stuff. The problem is that after I databind my gridview/repeater/datalist jquery quits working if the gridview/repeater/datalist is in an update panel.

After you click the button in the sample below, the jquery that makes the span show up when you mouse over quits working.

Any ideas of why this is happening, how to fix it or a better way to do this?

   <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>

And the code-behind:

 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();
    }

解决方案

The reason this is happening is because the controls get recreated on a partial postback. Use the 'live' feature of jQuery so rewrite your code like:

$(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);
    });
});

这篇关于UpdatePanel的打破jQuery脚本的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！