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;
    });

View

在此之前，我已经成功了。

但我想对第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"
});

当执行此代码时，它只会找出当前语句的对象whit类名称onlyDate。

之后，页面上附加了类名onlyDate的任何对象都不会执行datepick代码。

也许你应该尝试jquery函数“委托”或在每次追加后执行datepicker代码。

DOM操作时触发器的值发生变化

1 个答案: