0

この種の操作ケースを行う最善の方法は何ですか:

コンボボックスを使ったトリガーがchangeの時、以前にフォームに追加した textField の型を変更したい。

私のサンプルデータコレクション:

function DataProvide(){
    selectValues = { 
        "choose"        : "-Choose-",
        "id"            : "ID",
        "emp_name"      : "Employee Name",
        "photo_path"    : "Photo Path",
        "emp_id"        : "Employee ID",
        "start_date"    : "Start Date",
        "birth_date"    : "Birth Date"
    };

    $.each(selectValues, function(key, value) {   
         $('#data1_1')
             .append($("<option></option>")
             .attr("value",key)
             .text(value)); 
    }); 
}

$(document).ready(function() {
     DataProvide();
});

コンボボックスにデータが表示されました。

次に、 $.append()を使用してフォームにフィールドを追加します。

var count = 1;
$(".addCF").click(function(){
    count += 1;
    var $row = $('<tr>' 
    + '<td>' + '</td>'
    + '<td>' + '<input id="data2_' + count + '" type="text" name="data2[]" class="data2" value="" placeholder=""/>' + '</td>' 
    + '<td>' + '<input id="data3_' + count + '" type="text" name="data3[]" class="data3" value="" placeholder=""/>' + '</td>' 
    + '<td>' + '<a href="javascript:void(0);" class="remCF">Remove</a>' + '</td>' 
    + '</tr>').appendTo("#customFields");
    $row.find('td:first').append($('#data1_1').clone())
});

    $("#customFields").on('click','.remCF',function(){
        $(this).parent().parent().remove();
        count -= 1;
    });

意見

この時点まで、私は望み通りの成功を収めてきました。

しかし、3列目に少し変更を加えたいと思います。たとえば「 start_date 」を選択したトリガー（コンボボックス）でこのフォームを操作する最良の方法は、jQuery UIを追加して日付オプションを表示するクラス「 onlyDate 」を使用するようにフィールドを変更することです。

追加した ：

$(".onlyDate").datepicker({
    dateFormat: "dd-mm-yy"
});

次に、コンボ $("#customFields").on('change', '.tabelBaru', function() {

if(nilai=='gender'){
            $this.closest("tr").find(".data3").replaceWith(
                '<select name="data3[]" class="data3">'
                    + '<option value="man" selected >Man</option>'
                    + '<option value="woman">Woman</option>'
                + '</select>'
            )
        }else if(nilai=='start_date'){
            $this.closest("tr").find(".data3").replaceWith(
                '<input type="text" name="data3[]" value="" class="onlyDate"/>'
            )
        }
};

しかし、jQueryUI の datepickerは通常どおり表示されません。しかし、通常の形式 ($.append を使用しない) の場合、すべて正常に実行されます。

どうすれば修正できますか？

4

1 に答える 1

1 
$(".onlyDate").datepicker({
    dateFormat: "dd-mm-yy"
});

このコードが実行されると、現在のステートメントのオブジェクトがクラス名 onlyDate であることがわかります。

その後、クラス名が onlyDate でページに追加されたオブジェクトは、datepick コードを実行しません。

おそらく、jquery 関数の "delegate" を試すか、各追加後に datepicker コードを実行する必要があります。

于 2013-09-04T03:43:45.450 に答える