UpdatePanel打破JQuery腳本

這是我想要做的簡化版本。基本上我有一個datalist與一堆東西在裏面，當你在datalist中的鼠標懸停的項目，我想jquery隱藏/顯示的東西。問題是，如果gridview/repeater/datalist在更新面板中，我禁用了gridview/repeater/datalist jquery後會停止工作。UpdatePanel打破JQuery腳本

在下面的示例中單擊按鈕後，當鼠標懸停在工作狀態時，會顯示該跨度的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(); 
    }

來源

2010-07-07 Jason

出現這種情況的原因是因爲得到控制上重新創建一個局部回傳你附加的處理程序都將丟失。使用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); 
    }); 
});

來源

2010-07-07 21:51:56 Marko

感謝您的代碼片段。 +1 – Jason 2010-07-07 22:16:51

當在UpdatePanel刷新，它完全取代一切，你以前附加事件處理程序的DOM元素。最簡單的修復方法是initialize your event handlers in pageLoad() instead of $(document).ready()。它的代碼將在初始頁面加載時執行，但也會在每次UpdatePanel刷新後執行。

更好的解決方案是將代碼更改爲使用live()或delegate()，以便事件處理程序不受頁面內容的週期性更改的影響。

來源

2010-07-07 21:50:44

+1 - 你打我吧。另外，我並不知道pageLoad（）怪癖。很酷。 – 2010-07-07 21:52:39

在pageLoad（）中配置事件時，無論使用jQuery還是ASP.NET AJAX的$ addHandler，都必須小心，因爲可以將同一事件的多個副本連接到同一元素。 – Marko 2010-07-07 22:01:01

但是，您可以在分配每個事件之前使用$（element）.unbind（），以確保它不會被添加兩次。 – Marko 2010-07-07 22:02:32

當您使用更新面板進行AJAX回發時，在AJAX響應到達時，DOM中的DOM被刪除並重新創建。除非你使用live方法或livequery庫

來源

2010-07-07 21:51:22

不同的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+

來源

2015-02-12 10:19:44 user3656029

如何爲第三個選項處理'each'？ – Si8 2017-10-02 15:18:16

UpdatePanel打破JQuery腳本

回答

相關問題