2

私は 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 ではフォームを送信できません!!

実行される場合もあれば、最初のクリックでは起動されず、2 回目のクリックでのみ起動される場合もあります (この場合、送信されたフォームは選択されたファイルを取得していないため、サーバー側でエラーが発生します...)。何回クリックしても、送信ボタンが起動しない場合があります。

この問題は私を夢中にさせ始めます....

他のヒントはありますか？

どうもありがとうございました！

一番

シゲルシ

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イベントのすべてをa 内に配置し、functionそれを$('#fakeSubmitBt').clickand$('#fileUplSubmitBt').clickイベントにバインドします。

于 2012-05-04T20:02:39.930 に答える