Question

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

我有一个隐藏按钮，需要从javascript调用click（）函数。这适用于IE9以外的所有浏览器。

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

这里，fileUplSubmitBt是隐藏按钮，fakeSubmitBt是我需要点击的可见按钮。我注意到，如果打三次电话

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

然后提交表单，但在后端，表单的元素无法识别。

更新：感谢Ricardo和Jay给出的提示，我尝试使用触发器（'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

Answer 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
});

Answer 2

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

Answer 3

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

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

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

3 个答案: