Here is a simplified version of my page:
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title></title>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.2.6/jquery.min.js"></script>
<script language="javascript" type="text/javascript">
var cbFuncInit = function() {
$('div').click(function(evt) {
if (evt.target.type !== 'checkbox') {
var checkbox = $(':checkbox', this);
checkbox.attr('checked', !checkbox.attr('checked'));
evt.stopPropagation();
return false;
}
});
};
$(document).ready(function() {
cbFuncInit();
});
</script>
</head>
<body>
<form id="form1" runat="server">
<asp:ScriptManager ID="ScriptManager1" runat="server" />
<div id="myDiv" style="background-color:red;height:50px;width:50px;">
<asp:checkbox ID="Checkbox1" runat="server" ></asp:checkbox>
</div>
<asp:UpdatePanel ID="UpdatePanel1" runat="server">
<ContentTemplate>
<asp:Repeater ID="Repeater1" runat="server">
<ItemTemplate>
<div id="myDiv" style="background-color:red;height:50px;width:50px;">
<asp:checkbox ID="Checkbox1" runat="server"></asp:checkbox>
</div>
</ItemTemplate>
</asp:Repeater>
</ContentTemplate>
<Triggers>
<asp:AsyncPostBackTrigger ControlID="Button1"/>
</Triggers>
</asp:UpdatePanel>
<asp:Button ID="Button1" runat="server" Text="Button" onclick="Button1_Click" />
</form>
</body>
</html>
Here's a simplified code-behind:
protected void Button1_Click(object sender, EventArgs e)
{
var list = new List<string> { "", "", "" };
Repeater1.DataSource = list;
Repeater1.DataBind();
ScriptManager.RegisterStartupScript(Page, Page.GetType(), "", "cbFuncInit();", true);
}
Here's the problem:
The page allows you to click a div in order to click its nested checkbox. However, when doing a postback to great more checkboxes, then using ScriptManager.RegisterStartupScript to rebind the events, the original div is no longer clickable, while the new divs are...
HOWEVER (it gets better)...
When you click the button once more, all the divs are clickable now...
BUT WAIT...
When you click the button a second time, the first div is once again, no longer clickable.
Anyone know why? I was wondering if it had to do with JQuery's event object. Unfortunately my JavaScript debugging skills are a bit outmatched here. Thank you for any responses.