javascript - 在 IE9 中不通过 JavaScript 调用输入按钮单击

Question

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

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

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

这里，fileUplSubmitBt 是隐藏按钮，fakeSubmitBt 是可见按钮，我需要点击它。我注意到如果调用三次

$('#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 上我也无法提交表单!

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

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

还有其他提示吗？

非常感谢!

最佳

格格西

Answer 1

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

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

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

html

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

j查询

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

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