【问题标题】：click() in jQuery can it fire a server side buttonjQuery中的click（）可以触发服务器端按钮
【发布时间】：2011-08-11 12:37:24
【问题描述】：

我有一个 asp.net 网格视图。在其中我有 2 个像这样的 ImageButton：

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

注意第一个的可见性设置为 false，第二个的可见性设置为 OnClientClick="return false;" 以避免回发...

我的目标是从带有淡入淡出效果的 gridview 中删除一行，然后调用 ibDelete 后面的服务器端代码（第一个可见性设置为 false 的代码）。

$(".TempDeleteLineItem").click(function() { 
    $(this).closest("tr").fadeOut(5000, function() { 
        alert('hi1');
        $(this).remove();
        alert('hi2');
        $(this).closest(".DeleteLineItem").trigger('click');
        alert('hi3');
    }); 
});

所有警报的显示和淡入淡出效果都有效，我没有收到脚本错误..但是点击事件没有触发。我一定是错误地使用了 trigger()？

编辑

我也试过了

$(".TempDeleteLineItem").click(function() { 
    $(this).closest("tr").fadeOut(5000, function() { 
        alert('hi1');
        $(this).prev(".DeleteLineItem").bind('click');
        $(this).remove();
        alert('hi2'); 
    }); 
});

我试过.trigger 和.live ，似乎都是同一个问题。我得到了淡入淡出工作和删除工作，但点击事件似乎没有触发......

【问题讨论】：

标签： jquery asp.net gridview

【解决方案1】：

当您将服务器端控件可见性设置为 false 时，不会呈现该控件的 HTML，因此您的 jquery 甚至找不到控件，也没有发生触发器（检查页面的视图源，您不会找到图像按钮）。而不是设置 Visible="false"，您需要使用 CSS 使控件隐藏，即在此按钮上设置一个具有 display:none 的 css 类。然后它将以 HTML 呈现，您的 jquery 将触发该事件。

【讨论】：

好的，我将通过 css 将其更改为 display:none，然后更新你们

【解决方案2】：

你正在寻找prev()，像这样：$(this).prev('.DeleteLineItem').trigger('click')

closest() = "获取第一个匹配选择器的祖先元素，从当前元素开始，向上遍历 DOM 树。"

另外我不知道你的 asp 生成后会是什么样子，很高兴告诉我 :) 我在 PHP 方面...

【讨论】：

我也尝试了 prev 没有运气，淡入淡出但点击事件没有触发。
@bleckert - 在我的帖子中查看我的编辑，我尝试过 prev，然后我使用了 .live 和 .bind 但结果相同......

【解决方案3】：

你的控件ibDelete是Visible="false"，它不会在客户端渲染，所以不能被JavaScript触发。一个简单的解决方案是用 CSS 隐藏它：

.DeleteLineItem { display: none; }

由于您的选择器似乎不起作用，它可能是：

$(this).closest ('tr').find ('.DeleteLineItem').trigger ('click');

假设网格呈现在一个表格中，没有嵌套表格。

如果它选择了按钮但仍未触发回发，请尝试复制您的函数中生成的onclick，例如：

WebForm_DoPostBackWithOptions(new WebForm_PostBackOptions("some$naming$container$ibDelete", "", true, "", "", false, false));

这会手动触发回帖。

请注意，最正确的实现方式是编写自己的 WebControl 来实现 IPostBackEventHandler，并在淡出后在客户端调用 __doPostBack (...);。

【讨论】：

我将其更改为不显示，但点击事件仍然无法正常工作
嗯...也许看看我的答案？
实际上选择器不正确。不确定prev 是否适合，但可能是这样。
@all 我之前尝试过它仍然没有触发点击事件。 $(this).prev(".DeleteLineItem").trigger('click');
试一试，您可以检查 .DeleteLineItem 按钮的生成 HTML，在您的函数中复制/粘贴 onclick 属性，例如用__doPostBack 调用替换$(this).prev (...).trigger ('click')。

【解决方案4】：

我认为您不想触发按钮单击，因为这会使您的页面重新加载，从而使漂亮的淡入淡出变得毫无意义。您需要使用 WCF 或通过 MS AJAX 工具向服务器添加 ajax 方法。然后通过 jQuery 的 ajax 方法调用它，让它在服务器上执行删除操作。

【讨论】：

【解决方案5】：

您是否有理由需要使用 JS/jQuery 触发按钮？我可能在这里遗漏了细微差别，但您似乎可以简单地将 OnClientClick="doFadeEffect(this)" 添加到您的 ibDelete 图像按钮。当他们单击它时，将调用 doFadeEffect 并且您将有机会淡出该行。那么只要 doFadeEffect 返回 true，回发就会正常进行。

【讨论】：

【解决方案6】：

试试

.live('click',function(){/*.. function */})

和

.bind('click',function(){/*.. function */})

看看他们是否能提供更好的结果

编辑

live() 现在已被弃用，您应该改用.delegate。 http://api.jquery.com/delegate/

对于较新版本的 jQuery (1.7+)，您应该使用 .on() http://api.jquery.com/on/

如果您阅读.on() 注释，您会发现.live() 不再推荐用于任何版本。它存在一些严重的问题，在此处等的许多帖子中都已概述。

【讨论】：

【解决方案7】：

试试 .live()

最新版本的 Jquery 应该像下面这样使用：1.9 和更高版本

$('body').on('click', '.myButton', function)

点击此链接了解该功能的最新用法。 jQuery 1.9 .live() is not a function

【讨论】：