5

これは簡単かもしれませんが、私はSOを検索し、これについていくつかの提案を試しましたが、どれも機能しません。標準のhtmlボタンと他のフィールドを持つdivを持つMVCエディターテンプレートを使用しています。コレクションをテンプレートに渡すと、コレクション内の各アイテムのフィールドが一意のIDでレンダリングされます。次に、いずれかのボタンがクリックされたときにダイアログボックスを開きたいと思います。ボタンは、エディターテンプレート内でそのようにレンダリングされます。

@model ProductViewModel
<span>
    <button id="btnSelectTags-@(ViewData.TemplateInfo.HtmlFieldPrefix)" class="sig-button ie-shadowed select-tag" type="button" title="Select tags..." style="margin-right: 10px">Select tags</button>
</span>
// other fields

したがって、2つのオブジェクトを含むコレクションをエディターテンプレートに渡すと、次のhtmlが表示されます。

<button title="Select tags..." class="sig-button ie-shadowed select-tag" id="btnSelectTags-Products[0]" style="margin-right: 10px;" type="button">
// other fields then next item:
<button title="Select tags..." class="sig-button ie-shadowed select-tag" id="btnSelectTags-Products[1]" style="margin-right: 10px;" type="button">

これは問題ないようで、各ボタンに一意のIDを与えます。すべてのdivのアイテムは独自のタグのセットを持つことができるため、一意のID（私は思う）を持っている必要があります。したがって、このjQueryを使用して、ダイアログボックスを開く各ボタンにクリックイベントを追加します（セレクターに他のクラスも含めて、「ボタン」なしで試しました）。

if ($("button.select-tag")) {
    $(".select-tag").click(function () {
        showTagDialogBox();
    });
}

タグがレンダリングされるdivは次のとおりです。

<div style="display: none">
    <div id="tagDialogBox" title="Add Tags">
        @Html.EditorFor(x => x.ProductViewModels)
    </div>
</div>

これがshowTagDialogBox関数です。

function showTagDialogBox() {
    $('#tagDialogBox').dialog({
        autoOpen: false,
        title: "Select Tags",
        modal: true,
        height: 530,
        width: 700,
        buttons: {
            "Save": function () {
                $(this).dialog("close");
            },
            "Cancel": function () {
                $(this).dialog("close");
            }
        }
    });

    return false;
}

ただし、いずれかのボタンをクリックしても何も起こりません。Firebugでもjsエラーは発生しません。誰かが私が間違っているかもしれないことを見つけることができますか？これが私がやろうとしていることの写真です：

ここに画像の説明を入力してください

4

4 に答える 4

3

ここで何が起こっているのかを説明するには、次の 2 つの点に注意してください。

以下は、DOM にボタンが存在しない場合でも、常に true と評価されます。

if ($("button.select-tag")) { }

代わりに、次を使用します。

if ($("button.select-tag").size() > 0) { }

次に、フォーム要素内にボタンが存在するかどうかによっては、ダイアログが表示される前に、ページがデータをサーバーに送信している可能性があります。これを防ぐには.preventDefault()、クリック イベント ハンドラー内で次のように使用します。

$(".select-tag").click(function (e) {
    showTagDialogBox();
    e.preventDefault();
});
于 2012-07-25T01:17:03.657 に答える
2

要素がページに存在しなくても問題ないため、要素を確認しなくても実行できるため、次のように実行できます

$(".select-tag").click(function(e) {
    e.preventDefault();
    showTagDialogBox();
});

最初に確認したい場合は、これを試すことができます

if ($("button.select-tag").length) {
    $(".select-tag").click(function(e) {
        e.preventDefault();
        showTagDialogBox();
    });
}

または (最新バージョンの jquery を使用している場合)

$(".select-tag").on('click', function(e) {
    e.preventDefault();
    showTagDialogBox();
});
于 2012-07-25T01:28:11.790 に答える
1

わかりました - 持っていました

自動オープン: false

一方、true に設定する必要があります。

*額を平手打ち*

于 2012-07-25T08:52:55.960 に答える