Jquery doesn't work with MultiView

Question

I have a div inside a MultiView that is inside an UpdatePanel. When I click on the button that is inside UpdatePanel the callback is performed and the div appears, but it doesn't change its color on mouse hover (jquery doesn't work).

If I put the div outside the UpdatePanel jquery works correctly.

What could be the problem here?

Thank you

<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

You can use the Sys.Application.add_load event handler to execute client script after the ajax post back is complete. You probably don't want to wrap it in Document Ready, just put your jquery code in a plain function and call it from 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>

Also, make sure the add_load() call follows the scriptmanager tag. You cant put it in the header because the SYS object doest exist yet.

Answer 2

Try using .live since the div is not on the page when the document first loads:

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

If you want to do something different after hovering, try binding to both mouseover and mouseout:

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

Answer 3

The problem is when the div is created, the jquery script has already run. Try binding to the mouse over and mouse out properties using the jquery live method

Answer 4

The update panel, I believe, brings content in asynchronously, meaning that it's placed on the page after the document.ready event has fired. Thus, you're binding to that event after it's already happened. Try stripping the document.ready portion and seeing if that works.

EDIT: Or just use live as the others suggested. That's probably best. I'm pretty sure my reasoning is correct for why it doesn't work though!

Answer 5

One other thing could also be that .Net is rewriting the id of your elements so your jquert is unable to find the right id

with .Net web forms try using the following selector in jquery $("[id$='MyDiv']")