在 IE9 中不通过 JavaScript 调用输入按钮单击答案

【问题标题】：Input button click is not invoked through JavaScript in IE9在 IE9 中不通过 JavaScript 调用输入按钮单击
【发布时间】：2012-05-04 19:52:25
【问题描述】：

我正在使用 MVC 3、javascript 和 jQuery。

我有一个隐藏按钮，需要从 javascript 调用它的 click() 函数。这适用于除 IE9 之外的所有浏览器。

$('#fakeSubmitBt').click(function () {
    $('#fileUplSubmitBt').click();
});

这里，fileUplSubmitBt 是隐藏按钮，而 fakeSubmitBt 是可见按钮，我需要点击它。我注意到，如果一个电话 3 次

$('#fileUplSubmitBt').click();

然后表单提交了，但是在后台表单的元素不被识别。

更新：感谢 Ricardo 和 Jay 给出的提示，我尝试使用 trigger('click') 但这条路径也失败了。

在下面我发布了让我感到羞耻的代码（它是使用 Razor 的 MVC3）：

    <script type="text/javascript">

function s2cPanelReady() {
    $('#fakeBrowseBt').click(function () {
        $('#fileUplRadio').prop("checked", true);
        $('#gravatarRadio').prop('checked', false);
        $('#realFileUpload').click();
    });
    $('#fakeSubmitBt').click(function () {
        if ($('#gravatarRadio').prop("checked")) {
            $('#grvatarSubmitBt').click();
        } else if ($('#fileUplRadio').prop("checked")) {
            $('#fileUplSubmitBt').trigger('click');
        }
    });
}
    </script>
    <div class="inputForm">

<div class="inputField">
    <div class="userPicLargeFrame">
        <img src="/Images/Get?id=@Model.ID&size=40" class="userPicLarge" />
    </div>
</div>
@using (Html.BeginForm("ChangePicture", "User"))
{  
    <div class="inputField">
        <input type="radio" id="gravatarRadio"  />
        <span class="inputLabel">Gravatar:</span>
        @Html.EditorFor(model => model.Preferences.GravatarEmail)
        @Html.ValidationMessageFor(model => model.Preferences.GravatarEmail)
    </div>

    <input id="grvatarSubmitBt" type="submit" value="Save Pic" style="display:none;" />
}

@using (Html.BeginForm("UploadPicture", "User", FormMethod.Post, new { encType = "multipart/form-data", name = "uplPicForm" }))
{             
    <div class="inputField">
        <input type="radio" id="fileUplRadio" />
        <span class="inputLabel">Save your own pic:</span>
        <span class="inputLabel">
            <span style="display:inline-block; position:relative;">
                <input type="file" id="realFileUpload" name="fileUpload" style="position:relative; opacity:0; -moz-opacity:0 ;" />
                <span style="display:inline-block; position:absolute; top:0px; left:0px;">
                    <input id="fakePathBox" type="text" value="" readonly />
                    <input id="fakeBrowseBt" type="button" value="..."/>
                </span>
            </span>
        </span>

        <input id="fileUplSubmitBt" type="submit" name="submit" value="Upload" style="display:none;" />
    </div>
     }
    <div class="inputField">
        <span class="inputLabel">
            <input id="fakeSubmitBt" type="button" value="Submit" class="s2cButton" />
        </span>
    </div>
</div>

更新 N.2：我尝试删除所有 javascript 内容，并简单地将文件上传 HTML 标记与一个简单的提交按钮放在一起：在这种情况下，在 IE9 上我也无法提交表单！

有时它会运行，有时它不会在第一次点击时触发，而只会在第二次点击时触发（在这种情况下，提交的表单没有获得选定的文件，因此服务器端会导致错误.. .)，有时它根本不会触发提交按钮，无论我点击多少次。

这个问题开始让我抓狂了....

还有其他提示吗？

非常感谢！

最好的

cghersi

【问题讨论】：

我们能看到一些 HTML 的表单和按钮吗？
你尝试过使用trigger('click'); 甚至submit 吗？

标签： javascript jquery internet-explorer-9

【解决方案1】：

我遇到了类似的问题，最后只是将按钮转换为锚点 (<a>) 并调用 jquery-ui 函数 $.button()

注意： jquery ui 是必需的 http://jqueryui.com/

这样链接看起来仍然像一个按钮，并且 $.click() 事件有效。

html

<div class="input">
    <a href="#" id="emulate-button">Submit</a>
</div>

jquery

$("#emulate-button").button();

//Set event when clicked
$("#emulate-button").click(function () {
    //.... your logic here
});

【讨论】：

【解决方案2】：

就像里卡多说的，你需要使用触发器：http://jsfiddle.net/5hgsW/1/

【讨论】：

.click() 是.trigger('click') 的包装，所以不，您不需要使用它；它们在功能上是等效的。
@AnthonyGrist，我知道基本上 click() 执行触发器（'click'），但我个人经历过，有时触发器比自己点击更好。我不知道为什么。不过谢谢。

【解决方案3】：

如果未在 JQuery 中定义 $('#fileUplSubmitBt').click 事件，则 .click() 触发器可能不起作用。

将 $('#fileUplSubmitBt').click 事件中的所有内容放在 function 中，然后将其绑定到 $('#fakeSubmitBt').click 和 $('#fileUplSubmitBt').click 事件中。

【讨论】：