在 IE 上提交 ajax 表单后，JQuery 按钮单击不起作用答案

【问题标题】：JQuery button click not working after ajax form submit on IE在 IE 上提交 ajax 表单后，JQuery 按钮单击不起作用
【发布时间】：2011-07-25 17:45:20
【问题描述】：

我在使用 JQuery ajax 提交表单后点击按钮时遇到了一些问题。这是我的 html 的样子：

<div>
   <!-- normal HTML buttons that are overridden by JQuery for styling purposes -->
   <!-- Here, on render, the HTML button is hidden and a similar JQuery button is shown on       the DOM -->
</div>
<div>
    <!--- Stuff generated by a third-party tool --> 
</div>
<div>
    <!--- Our form loaded using JQuery --> 
</div>

上面提到的按钮实际上是由第三方工具放入 DOM 的，在页面渲染中，我们通过隐藏按钮和生成 JQuery 按钮来接管它们，然后模仿原始按钮的行为。所以，基本上，用户会在表单中填写第 3 方的东西，填写我们的表单，然后单击 JQuery 按钮，在此之后，我们首先将表单提交到服务器，然后单击原始按钮，以便第 3 方工具可以提交它自己的东西。这是提交表单的代码：

clickoriginalbutton = function(passedButton)  {
    $(passedButton).click();

},
//save our data
submitourform = function(buttonreference) {
    $('#our_form').ajaxForm(options);

    $('*').button('disable');
    $('#our_form').ajaxSubmit({
        iframe: true,
        dataType: 'json',
        success: function(data){
            if (data.status == 'success') {
                         clickoriginalbutton (getOrigButton(buttonreference));
                };                                              
            }
        });
}

如您所见，保存表单成功后点击原始按钮。按钮单击在 FF 中工作正常，但在 IE 中失败。我可以看到我们的表单已经提交并且成功回来了，但是 IE 只是没有触发原始按钮的点击。我检查了所有对按钮的引用都很好。我还在这里的论坛中搜索并找到了 live/delegate 等，但不确定它们是否对我有用，因为我们的按钮总是在那里，它们不是通过呈现的。 ajax - 事实上，没有任何东西是通过渲染的。第一次加载后的ajax。所以，不知道为什么按钮点击在 IE 上不起作用，而它在 FF 上起作用。任何想法为什么会发生这种情况。

谢谢，尼丁

【问题讨论】：

clickoriginalbutton的内容是什么？ jQuery 有一个“触发器”方法，可以让您引发事件，这些事件将调用对象上的附加处理程序。如果一个处理程序没有被触发，那么它就没有附加到事件上，所以你想看看这个处理程序是否被某种方式清除了。
clickoriginalbutton 的内容与 post 中的完全相同 - 它只是在传递的按钮上调用 click() 函数。在没有 ajax 提交的地方也会调用 clickoriginalbutton ，在这些情况下，它在 IE 上也可以正常工作；只有当我提交表单并调用 clickorignalbutton 时，该按钮才不会被点击。如果我从 submitourform 函数中删除 ajaxSubmit 调用，则该按钮会被单击。此外，虽然我的帖子显示了 Form 插件的用法，但我也尝试了 JQuery .ajax，结果相同 - 按钮在 IE 中无法单击。
所以看起来在 IE JQuery 中无法将点击事件绑定到原始按钮。我更改了 clickoriginalbuttons 代码并使用了普通的 javascript 点击，它开始在 IE 中工作。现在我的代码是这样的： var origButton = document.getElementById($(daButton).attr("id")); origButton.click();问题暂时解决了:)

标签： jquery ajax internet-explorer

【解决方案1】：

您是否尝试过使用 jQuery 的 '.live()' 函数？您说按钮已插入 DOM，因此单击功能将不起作用，因为该事件只会在页面加载时绑定。如果您使用 .live() ，它会将事件绑定到已经存在和将来存在的任何 DOM 元素。

【讨论】：

嗨，杰米，感谢您的回答。在发帖之前我已经尝试过 live() 并且对我不起作用 - 因为按钮不是动态插入的，它们从页面加载就在那里并且永远不会改变。无论如何，根据我对帖子的最后评论，我通过使用 document.getElementById(mybuttonid).click() 而不是 Jquery click 解决了这个问题。再次感谢。
完全不用担心 - 您可能想自己发布一个答案并接受它只是为了避免混淆，很高兴您明白了:)。
当然，只是在等待锁定期（基于我的权限）结束。 :)

【解决方案2】：

所以看起来在 IE JQuery 中无法将点击事件绑定到原始按钮。我更改了 clickoriginalbuttons 代码并使用了普通的 javascript 点击，它开始在 IE 中工作。现在我的代码是这样的： var origButton = document.getElementById($(daButton).attr("id")); origButton.click();问题暂时解决了:)

【讨论】：