weird javascript image map behaviour with update panels in Chrome

Question

I have discovered an odd bug in one of my apps when using Chrome. The app displays images with image maps which trigger javascript events. The images/maps are in update panels. When the update panel refreshes, the image changes, and if you inspect the element the image map appears to have changed, but Chrome is still calling the old javascript function.

I have attempted to put together a simple example to demonstrate. It's a pretty poor example since it doesn't appear to do anything at all in any other browser, but I think it demonstrates the problem ok in Chrome (hopefully).

<form id="form1" runat="server">
    <asp:ScriptManager ID="MyScriptManager" runat="server"></asp:ScriptManager>
    <div>
        <a href="#" onclick="__doPostBack('MyUpdatePanel', '');">reload</a>
        <asp:UpdatePanel ID="MyUpdatePanel" runat="server">
            <ContentTemplate>
                <%=CreateClickable()%>
            </ContentTemplate>
        </asp:UpdatePanel>
    </div>
</form>


public string CreateClickable()
{
    if (IsPostBack)
        return CreateClickable("red", "postback msg");
    else
        return CreateClickable("blue", "original msg");
}


private string CreateClickable(string color, string msg)
{
    string html;

    html = @"<map id=""myMap"" name=""myMap"">
                 <area shape=""rect"" coords=""0,0,100,100"" onclick=""alert('" + msg + @"');"">
             </map>";
    html += @"<img id=""myImg"" usemap=""myMap"" style=""height:100px; width:100px; background-color:" + color + @";"">";

    return html;
}

Answer 1

usemap=""#myMap"" try that