JQuery event not working on async postback, fixing on 2nd postback, breaking on 3rd
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;">
开发者_JS百科 <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.
I'm not sure what is going on here without looking at an actual version of the page, but it seems like there is some kind of conflict happening when you rebind the events.
One thing you can try is:
- First replace jQuery 1.2.6 with jQuery 1.3
- And then replace
$('div').click(function(evt){//function code here})with$('div').live('click',function(evt){//function code here})
Once you have done that, you do not need to use ScriptManager.RegisterStartupScript to rebind the events, as the events will be captured via delegation. Keep adding new checkboxes via postback, and the events will be bound automatically...
Hope that solves your problem...
加载中,请稍侯......
精彩评论