DOM манипулирование при изменении значения триггера

Question

Каков наилучший способ сделать этот случай манипуляции:

Когда изменяется триггер, использующий поле со списком, я хочу изменить тип 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", затем поле будет изменено, чтобы использовать класс "onlyDate", который я добавляю jQuery UI для отображения параметров даты.

Я добавил:

$(".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) все работает нормально.

Как мне это исправить?

Answer 1

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

Когда этот код выполняется, он обнаружит только объект этого оператора с именем класса onlyDate.

После этого любой объект с именем класса onlyDate, добавляемый на страницу, не будет выполнять код datepick.

Возможно, вам следует попробовать функцию jquery "делегировать" или выполнить код datepicker после каждого добавления.