Jquery 不适用于 MultiView答案

【问题标题】：Jquery doesn't work with MultiViewJquery 不适用于 MultiView
【发布时间】：2011-08-08 19:55:12
【问题描述】：

我在 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;
    }

【问题讨论】：

您的.hover 事件中只有一个函数。要么使用两个（一个用于鼠标进入，另一个用于鼠标离开），或者使用mouseover。

标签： jquery asp.net multiview

【解决方案1】：

尝试使用.live，因为第一次加载文档时div不在页面上：

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

如果您想在悬停后做一些不同的事情，请尝试同时绑定 mouseover 和 mouseout：

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

【讨论】：

还有一个问题 - 如果我使用 each() 为 document.ready 上的 html 元素（宽度、高度等）设置一些初始参数，如何使用 each() （或在这种情况下，当我在 document.ready 之后加载内容时，具有类似 live() 的功能？
答案在这里encosia.com/2009/03/25/…

【解决方案2】：

您可以使用 Sys.Application.add_load 事件处理程序在 ajax 回发完成后执行客户端脚本。您可能不想将它包装在 Document Ready 中，只需将您的 jquery 代码放在一个普通函数中并从 AjaxLoadComplete() 调用它。

<asp:ScriptManager ID="ScriptManager1" runat="server">
</asp:ScriptManager>
<script type="text/javascript">

    Sys.Application.add_load(AjaxLoadComplete);

    function AjaxLoadComplete() {
        //Call your jquery methods here
    }


</script>

另外，请确保 add_load() 调用跟在 scriptmanager 标记之后。你不能把它放在标题中，因为 SYS 对象还不存在。

【讨论】：

【解决方案3】：

我相信，更新面板会异步引入内容，这意味着它是在document.ready 事件触发后放置在页面上的。因此，您在该事件已经发生后绑定到该事件。尝试剥离 document.ready 部分，看看是否可行。

编辑：或者像其他人建议的那样使用live。这可能是最好的。我很确定我的推理是正确的，为什么它不起作用！

【讨论】：

【解决方案4】：

问题是在创建div 时，jquery 脚本已经运行。尝试使用jquery live 方法绑定到鼠标悬停和鼠标移出属性

【讨论】：

【解决方案5】：

另一件事也可能是 .Net 正在重写您的元素的 id，因此您的 jquert 无法找到正确的 id

使用 .Net 网络表单尝试在 jquery $("[id$='MyDiv']") 中使用以下选择器

【讨论】：