图像按钮在第一次回发后不会触发 jQuery / 回发？答案

【问题标题】：image button doesnt fire jQuery / postback after first postback?图像按钮在第一次回发后不会触发 jQuery / 回发？
【发布时间】：2011-08-11 14:49:33
【问题描述】：

我有一个带有更新面板的 asp.net 网络应用程序。在更新面板内部，我有一个网格视图控件。在网格视图控件中，我有两个按钮注意可见性：

<ItemTemplate>
  <asp:ImageButton class="DeleteLineItem" style="display:none;" ID="ibDelete2" runat="server" CommandName="DeleteRow" ImageUrl="images/d.gif" ToolTip="Delete Line Item?" />
  <asp:ImageButton class="TempDeleteLineItem" ID="ibTempDelete" OnClientClick="return false;" runat="server" ToolTip="Delete Line Item?" ImageUrl="images/d.gif" />
</ItemTemplate>

注意第一个显示设置为none 我这样做的原因是你会注意到第二个有一个 onclientclick="return false;"。当我单击 id 为 ibTempDelete 的按钮时，它会调用一些 jquery 从我的 gridview 中删除一行，然后触发 ibDelete2 按钮（隐藏的那个）的单击事件。用于此的 jquery 在这里：

$(".TempDeleteLineItem").click(function() { 
    $(this).closest("tr").fadeOut(3000, function() { 
        alert('hi');
        __doPostBack($(this).closest ('tr').find ('.DeleteLineItem').attr('name'), "");
        $(this).remove();
    }); 
});

我找到该行并将其淡出，通过调用 DeleteLineItem 事件并删除该行来回发。现在，当我第一次加载我的网页时（假设网格视图中有 3 条记录）。当我的页面加载时，我可以轻松单击ibTempDelete 按钮并调用jquery，淡出该行，提醒您好，发回帖子并删除该行......它基本上可以工作！太好了，我的问题是什么？

我的问题是在这篇文章返回后（现在我的网格视图中有 2 行）如果我尝试点击 ibTempDelete 按钮没有任何反应，它似乎不再可点击？警报甚至不显示。

所以我的问题是我对 asp.net 和回发的工作方式缺乏了解。一旦我点击第一次回发，为什么按钮不再可点击？

【问题讨论】：

标签： jquery asp.net

【解决方案1】：

当您调用__doPostBack 时，页面无论如何都会被刷新，您为什么要调用$(this).remove()。也许您可以在致电__doPostBack 之前致电它。即使在回发之后重新加载页面时，事件处理程序也应该按原样工作。使用 live 试试这个。

$(".TempDeleteLineItem").live('click', function() { 
    $(this).closest("tr").fadeOut(3000, function() { 
        $(this).hide().find('.DeleteLineItem').click();
    }); 
});

【讨论】：

Shankar - 你是对的，删除它不必要的，这又是正常工作的一半。问题是我似乎无法理解我在创建新行/从 gridview 中删除所有行时遇到的一个奇怪问题。由于此 jquery / 通过客户端的回发，系统变得无响应。是否有可能我们可以在聊天中交谈，以便我可以与您讨论这个问题？
@All - 请参阅我的答案以获得真正的答案，但我必须感谢 ShankarSangoli，因为他是提出这个问题并帮助我的人。谢谢 ShankarSangoli

【解决方案2】：

Shankar 在聊天中帮助了我，我们最终这样做了：

$(".TempDeleteLineItem").live('click', function() { 
    var $this = $(this);
    $(this).closest("tr").fadeOut(1000, function() { 
       $(this).hide();
       $this.prev('.DeleteLineItem').click();
    }); 
    return false;
});

【讨论】：