click() 在 Firefox 和 chrome 中完美运行，但在 IE 中出现奇怪的行为答案

【问题标题】：click() working perfectly in firefox and chrome but strange behavior in IEclick() 在 Firefox 和 chrome 中完美运行，但在 IE 中出现奇怪的行为
【发布时间】：2018-08-29 21:42:59
【问题描述】：

我有一些有趣的行为，我被困住了

我有一个 vb.net 页面，它允许用户从表单中动态添加和删除项目，添加和删除功能都在前端使用 jQuery

function remRow(clicked_id) {
    console.log("Start remRow");
    $("#hdnID").val(clicked_id);
    document.getElementById("remrow").click();
    console.log("End remRow");
}

这会单击更新面板中的隐藏按钮，后面代码中的事件处理程序会从 HtmlGenericControl 数组中删除选定的行。 jQuery 的额外步骤的原因是他们可以添加的可能表单元素列表来自前端的 ajax，但 HtmlGenericControl 在后端。

remRow 函数作为 HtmlGenericControl 数组的一部分附加到一个动态创建的按钮上

在 Chrome 和 Firefox 上，表单元素会根据需要立即删除，在 IE 上单击将在控制台中显示为

Start remRow
End remRow

该行不会被删除，双击会显示

Start remRow
End remRow
Start remRow
End remRow
ROW REMOVED!

虽然该行已从 HtmlGenericControl 数组中删除，但它仍保留在屏幕上，直到第三次单击。我的 addRow 函数与 remRow 函数相同，并且每次在所有浏览器中都能正常工作，它只是具有这种行为的删除行函数

我尝试了几种不同的想法，例如将函数内容包装在一个

中

$('document').ready(function(){});

以及使用其他点击按钮的方法，例如

$("#remRow").click()

我不确定为什么在 Chrome 和 Firefox 上完美运行的代码在 IE 上会失败

编辑： @BojanIvanac remrow 是更新面板中的一个按钮

<asp:ScriptManager ID="ScriptManager" runat="server"></asp:ScriptManager>
<asp:UpdatePanel ID="UpdatePanel" runat="server" UpdateMode="Conditional">
<ContentTemplate>

    <asp:PlaceHolder ID="formPlaceholder" runat="server"></asp:PlaceHolder>

    <!-- Hidden Elements -->
    <asp:Button ID="remrow" style="display:none;" runat="server"/>
    <asp:Button ID="addrow" style="display:none;" runat="server"/>

</ContentTemplate>
</asp:UpdatePanel>

后面的代码：

Private Sub btnremrow_Click(sender As Object, e As EventArgs) Handles remrow.Click
    RemoveRow() // Gets called on double click, does not update UpdatePanel
End Sub

【问题讨论】：

你能建立一个minimal reproducible example吗？
“remrow”是一个 div 吗？ Div 没有他们处理的点击事件。

标签： javascript jquery asp.net vb.net

【解决方案1】：

要点击一个按钮，你应该调用触发函数：

$("#remRow").trigger( "click" );

参考：http://api.jquery.com/trigger/

【讨论】：

这个有同样的问题，我相信这个问题更可能是更新面板而不是jquery语法

【解决方案2】：

我已经解决了，结果是有点奇怪。

document.getElementById("remrow").click();正在触发，但是因为我有一个 ASP 按钮正在动态生成调用 remRow() 函数，然后另一个 ASP 按钮在同一个更新面板中被该函数单击，所以一个回发被触发但随后被第二个中断按钮回发。我不确定为什么这个问题只出现在 IE 中。

我通过将两个按钮修改为 HTML 按钮而不是 ASP 按钮来修复它，并调用从静态 html 按钮中删除行的服务器端处理程序

<asp:UpdatePanel ID="UpdatePanel2" runat="server" UpdateMode="always">
  <ContentTemplate>

     <asp:PlaceHolder ID="FormItemsHere" runat="server"></asp:PlaceHolder>

      <asp:Button ID="addrow" style="display:none;" runat="server"/>
      <!-- Modified Button -->
      <button id="remrow" type="button" runat="server" style="display:none;" onserverclick="btnremrow_Click"></button> 

  </ContentTemplate>
</asp:UpdatePanel>

对于动态生成的按钮：

Dim btnRem As New HtmlButton() With {
    .ID = "btnRem" + Convert.ToString(rowcount),
    .InnerText = "Remove"
}
btnRem.Attributes.Add("onClick", "remRow('" + Convert.ToString(rowcount) + "')")

代替：

Dim btnRem As New Button() With {
    .ID = "btnRem" + Convert.ToString(rowcount),
    .Text = "Remove",
    .OnClientClick = "remRow('" + Convert.ToString(rowcount) + "')"
}

我还清除了 btnremrow_Click 末尾的 HtmlControl 列表，并重新制作了它

    FormItemsHere.Controls.Clear()
    For Each control As Control In row
        FormItemsHere.Controls.Add(control)
    Next

希望对遇到同样问题的人有所帮助

【讨论】：