2

我正在使用 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 上我也无法提交表单！

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

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

还有什么提示吗？

非常感谢你！

最好的

盖尔西

4

3 回答 3

3

我遇到了类似的问题，最后只是将按钮转换为锚（<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
});
于 2012-10-17T15:18:59.400 回答
0

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

于 2012-05-04T20:00:59.587 回答
0

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

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

于 2012-05-04T20:02:39.930 回答