javascript - 通过 javascript 创建新的 javascript 代码

Question

我想通过单击 om o 按钮在 html 表中创建一个新行! 每行有几个 input !还有

<script type="text/javascript">
row = 2;
specific_row_id = new Array();
$(document).ready(function() {
    $(".change_1").change(function() {
        if ($('.change_1:checked').val() == 'yes') {
            $("#change_time_1").prop('required', true);
            $("#change_time_1").prop('readonly', false);
            $("#change_time_1").css('background', '#fff');
        } else {
            $("#change_time_1").prop('readonly', true);
            $("#change_time_1").css('background', 'rgba(255, 117, 117, 0.3)');
            $("#change_time_1").prop('required', false);
        }
    });

    //==============================

    $('#new_row').click(function() { //1
        $('#ghate_table').append('<tr><td>' + row + '</td><td><input name="ng_name_' + row + '" type="text" class="ng_name form-control full_w " ></td><td class ="ng_service_td"><div class="selected_container" id="selected_container_' + row + '" ><input name="service_time_' + row + '" id="service_time_' + row + '" type="number" class="service_time form-control " > <select name="service_time_type_' + row + '" class="form-control" ><option>ماه</option><option>روز</option><option> ساعت </option> </select> </div></td><td> <span class = "yes_change"><input name="change_' + row + '" class="change_' + row + '" id="change_yes_' + row + '" type="radio" value="yes"  checked> دارد </span>   <input name="change_time_' + row + '" id="change_time_' + row + '" type="number" class="change_time form-control " >  <select name="change_time_type_' + row + '" class="form-control" ><option>     ماه </option> <option>  روز </option><option>ساعت</option> </select><span class = "no_change"> <input name="change_' + row + '" class="change_' + row + '" id="change_no_' + row + '" type="radio" value="no" > ندارد  </span>  </td> </tr> ');

        specific_row_id[row] = row;
        change = '.change_' + specific_row_id[row];
        change_checked = '.change_' + specific_row_id[row] + ':checked'
        change_time = '#change_time_' + specific_row_id[row];

        alert(specific_row_id[row])

        $(change).change(function() { //2

            if ($(change_checked).val() == 'yes') {
                $(change_time).prop('required', true);
                $(change_time).prop('readonly', false);
                $(change_time).css('background', '#fff');
            } else {
                $(change_time).prop('readonly', true);
                $(change_time).css('background', 'rgba(255, 117, 117, 0.3)');
                $(change_time).prop('required', false);
            }
        }); //2
        row++;

    }); //1
});
</script>

新行将创建得很好!最后创建的行的脚本效果很好!但如果我创建另一个新行，javascrip 脚本不适用于其他最后创建的行! 如何通过 javascript 或 jquery 创建新的 javascript 代码？

Answer 1

这是因为您使用全局变量来跟踪元素，因此您将覆盖前一行的引用。使用局部变量，以便每次都能获得一组新的变量:

$('#new_row').click(function() { //1
    $('#ghate_table').append('<tr><td>' + row + '</td><td><input name="ng_name_' + row + '" type="text" class="ng_name form-control full_w " ></td><td class ="ng_service_td"><div class="selected_container" id="selected_container_' + row + '" ><input name="service_time_' + row + '" id="service_time_' + row + '" type="number" class="service_time form-control " > <select name="service_time_type_' + row + '" class="form-control" ><option>ماه</option><option>روز</option><option> ساعت </option> </select> </div></td><td> <span class = "yes_change"><input name="change_' + row + '" class="change_' + row + '" id="change_yes_' + row + '" type="radio" value="yes"  checked> دارد </span>   <input name="change_time_' + row + '" id="change_time_' + row + '" type="number" class="change_time form-control " >  <select name="change_time_type_' + row + '" class="form-control" ><option>     ماه </option> <option>  روز </option><option>ساعت</option> </select><span class = "no_change"> <input name="change_' + row + '" class="change_' + row + '" id="change_no_' + row + '" type="radio" value="no" > ندارد  </span>  </td> </tr> ');

    specific_row_id[row] = row;
    var change = '.change_' + specific_row_id[row];
    var change_checked = '.change_' + specific_row_id[row] + ':checked'
    var change_time = '#change_time_' + specific_row_id[row];

    alert(specific_row_id[row]);

    $(change).change(function() { //2

        if ($(change_checked).val() == 'yes') {
            $(change_time).prop('required', true);
            $(change_time).prop('readonly', false);
            $(change_time).css('background', '#fff');
        } else {
            $(change_time).prop('readonly', true);
            $(change_time).css('background', 'rgba(255, 117, 117, 0.3)');
            $(change_time).prop('required', false);
        }
    }); //2
    row++;

}); //1