0

クリックするとテキストが消えてぼやけると元に戻る一連のテキスト フィールド (従来のフォームの動作) と、クリックすると jQuery モーダル ウィンドウが表示されるボタンがあります。ただし、ユーザーが jQuery を使用してテキスト フィールド (およびボタン) を追加できるようにしたいと考えました。問題は、ユーザーが追加したフィールドが静的フィールドと同じように動作しないことです。たとえば、ボタン (ユーザーが追加したもの) をクリックすると、モーダルが表示されません。より良いアイデアを提供するための私のコードは次のとおりです。

<form method="post" action="payment.php">
    <div id="formulaire">
        <div class="formelements">
            <input type="text" name="from" value="Ex: English(UK)" style="width:100px;margin-right:0px;"
            class="langfield">
            <div class="droparrow" id="arrow"></div>
            <input type="text" name="from" value="Ex: French(FR)" style="width:100px;margin-right:0px;"
            class="langfield">
            <div class="droparrow"></div>
            <input type="text" name="nopages" id="nopages" value="Ex:4">
            <div class="uploadbtn"></div>
        </div>
    </div>
</form>

これは、フィールドの動作を変更するための私の JavaScript コードです。

$('.formelements input').each(function () {
    var default_value = this.value;
    $(this).focus(function () {
        if (this.value == default_value) {
            this.value = '';
            $(this).css("font-weight", "bold");
            $(this).css("color", "#323232");
        }
    });
    $(this).blur(function () {
        if (this.value == '') {
            this.value = default_value;
            $(this).css("font-weight", "normal");
            $(this).css("color", "#9e9e9e");
        }
    });
});
/* Modals script start UPDATED AS REQUESTED  */
   $('#formelements').on("click", ".uploadbtn", function () {
    $("#modaldialog").dialog({
    height: 332,
    width: 625,
    modal: true
    });
   });

事前にご協力いただきありがとうございます!!

4

1 に答える 1

1

「モーダル ダイアログがない」問題を修正するには、

$(".uploadbtn").click(function () {
    $("#modaldialog").dialog({
        height: 332,
        width: 625,
        modal: true
    });
});

と

$('.formelements').on("click", ".uploadbtn", function () {
    $("#modaldialog").dialog({
        height: 332,
        width: 625,
        modal: true
    });
});

これは、新しく作成された DOM 要素に対して機能する.on()関数を使用します。#formelementsロード時に存在する任意の親要素に置き換えることができます-フォームはここで使用できます

ノート

このon()メソッドが機能するには、少なくとも jQuery 1.7 が必要です。以前のバージョンを使用している場合は、delegate()を使用できます。

$('.formelements').delegate(".uploadbtn", "click", function () {
    $("#modaldialog").dialog({
        height: 332,
        width: 625,
        modal: true
    });
});
于 2012-04-17T14:38:51.817 に答える