jQuery可选择在ASP.NET Ajax应用程序中导致完整的页面回传

Question

我希望我的可选择控件能够作为一个自动后台控件运行，当选中某些内容时，脚本会点击一个按钮并将可选择控件的值返回到后台。但是它与我的ASP.NET Ajax和UpdatePanels不兼容。有时会发生完全后台刷新，而不是部分刷新。

从我的调试中得出的结论是，当stop函数运行时，jQuery在幕后进行了一些操作。如果我添加一个弹出窗口来停止stop函数，部分后台刷新就可以正常工作。

更加混乱的是，这在IE9和Chrome中有效，但在IE7和IE8中无效。因此，它也可能是浏览器特定的。

jQuery版本是：v1.6.2

脚本:

<script language="javascript">
    $('.selectable').live("mouseover", function () {
        if (!$(this).data("selectable-init")) {
            $(this).data("selectable-init", true);

            $(this).selectable({
                filter: '.item',
                stop: function () {
                    $("#<% =btnPostback.ClientID %>").click();                        
                }
            });
        }
    });    
</script>

HTML:

<div class="selectable">
    <div class="item">1</div>
    <div class="item">2</div>
    <div class="item">3</div>
    <div class="item">4</div>
</div>

<asp:UpdatePanel runat="server">
    <ContentTemplate>
        <asp:Literal ID="litIsPostback" runat="server"></asp:Literal>
        <asp:Button ID="btnPostback" runat="server" OnClick="btnPostback_OnClick" />
    </ContentTemplate>
</asp:UpdatePanel>

代码后台：

protected void btnPostback_OnClick(object sender, EventArgs e)
{
    litIsPostback.Text = ScriptManager.GetCurrent(this).IsInAsyncPostBack.ToString();
}

- Jimmy Mattsson

Answer 1

这是我想出的最接近解决方案。

        $('.selectable').selectable({
            filter: '.item',
            stop: function (event, ui) {
                $('.ui-selectable-helper').remove();

                setTimeout(function () {
                    $("#<% =btnPostback.ClientID %>").click();
                }, 1);
            }
        });

在回传之前移除助手（套索），我可以从上往下拖动，但是我不能反过来做。在jQuery中，助手会在停止事件后被移除。

我不确定为什么setTimeout起作用，但它也解决了完整回传的问题。

- Jimmy Mattsson