Jquery 不适用于 MultiView

Question

我在 UpdatePanel 内的 MultiView 中有一个 div。当我单击 UpdatePanel 内的按钮时，将执行回调并显示 div，但鼠标悬停时它不会更改其颜色(jquery 不起作用)。

如果我将 div 放在 UpdatePanel 之外，jquery 可以正常工作。

这可能是什么问题？

谢谢

<script src="jquery-1.5.2.min.js" type="text/javascript"></script>
<asp:ToolkitScriptManager ID="ToolkitScriptManager1" runat="server">
</asp:ToolkitScriptManager>
<script type="text/javascript">
    $(document).ready(function () {
        $("#MyDiv").hover(function () { $(this).css({ 'background-color': 'Red' }) });
    });     

</script>

<asp:UpdatePanel ID="UpdatePanel1" runat="server" UpdateMode="Conditional">
    <ContentTemplate>
        <asp:MultiView runat="server" ID="mvPopup">
            <asp:View ID="View1" runat="server">
              <div id="MyDiv">Some text here</div>
            </asp:View>
        </asp:MultiView>
        <asp:LinkButton runat="server" OnClick="btnLink_Click" ID="btnLink" Text="Click here" />
    </ContentTemplate>
</asp:UpdatePanel>

protected void btnLink_Click(object sender, EventArgs e)
    { 
        mvPopup.ActiveViewIndex = 0;
    }

Answer 1

尝试使用.live因为当文档首次加载时 div 不在页面上:

$(document).ready(function () {
        $("#MyDiv").live("hover", function () { $(this).css({ 'background-color': 'Red' }) });
    });

如果您想在悬停后执行不同的操作，请尝试绑定(bind)到 mouseover 和 mouseout:

$('#MyDiv').live('mouseover mouseout', function(event) {
  if (event.type == 'mouseover') {
    // do something on mouseover
  } else {
    // do something on mouseout
  }
});