动态生成具有唯一ID的多个范围滑块

Question

更新：正确答案在下面

因此，我有一个“添加新子点”按钮，单击该按钮后，将使用3个范围滑块将新行添加到表中。我的问题是，每当我单击按钮时，JS代码都不会应用到它。我是JS的新手，谁能帮助我解决这个问题。

HTML代码

<tr style="text-align: center;">
<td name="name" id="metrics'+unique_id + '">Attendance - Team</td>
<td>
<input style="width: 50px; height: 30px; border-radius: 10%;" type="number" id="weightage'+unique_id + '" name="weight" value="10">
</td>
<td>
<input style="width: 20px; margin-bottom: 10px; border: none;" type="text" class="ex2SliderVal1" value="20">
<input style="width: 85px; margin-right: 40px;" id="ex" type="text" class="span2" value="" data-slider-min="0" data-slider-max="100" data-slider-value="[20,80]"/> 
<input style="width: 25px; border: none; margin-left: 5px;" type="text" class="ex2SliderVal2" value="80">
</td>
<td>
<input style="width: 20px; margin-bottom: 10px; border: none;" type="text" class="ex3SliderVal1"  value="20">
<input style="width: 85px; margin-right: 40px;" id="lx" type="text" class="span2" value="" data-slider-min="0" data-slider-max="100" data-slider-value="[20,80]"/> 
<input style="width: 25px; border: none; margin-left: 5px;" type="text" class="ex3SliderVal2"  value="80">
</td>
<td>
<input style="width: 20px; margin-bottom: 10px; border: none;" type="text" class="ex4SliderVal1"  value="20">
<input style="width: 85px; margin-right: 40px;" id="zx" type="text" class="span2" value="" data-slider-min="0" data-slider-max="100" data-slider-value="[20,80]"/> 
 <input style="width: 25px; border: none; margin-left: 5px;" type="text" class="ex4SliderVal2" value="80">
</td>
<td>
<a class="add" title="Add" data-toggle="tooltip"><i class="material-icons">&#xE03B;</i></a>
 <a class="edit" title="Edit" data-toggle="tooltip"><i class="material-icons">&#xE254;</i></a>
 <a class="delete" title="Delete" data-toggle="tooltip"><i class="material-icons">&#xE872;</i></a>
</td>
</tr>

JS代码

    $("#ex").slider({});
    $("#ex").on("slide", function(slideEvt) {
        $(".ex2SliderVal1").val(slideEvt.value[0]);
        $(".ex2SliderVal2").val(slideEvt.value[1]);
    });
    $("#lx").slider({});
    $("#lx").on("slide", function(slideEvt) {
        $(".ex3SliderVal1").val(slideEvt.value[0]);
        $(".ex3SliderVal2").val(slideEvt.value[1]);
    });
    $("#zx").slider({});
    $("#zx").on("slide", function(slideEvt) {
        $(".ex4SliderVal1").val(slideEvt.value[0]);
        $(".ex4SliderVal2").val(slideEvt.value[1]);
    });

我如何编写一个JS代码来动态创建一行，因为每个ID应该是唯一的？

Answer 1

您可以使用document.createElement('div')创建它们，然后使用html创建一个变量并添加（使用appendChild() ）它到您创建的div 这可以帮助：

http://jsfiddle.net/pmiranda/oz38ucbt/5/

Answer 2

这是更新的答案！！！

HTML代码

<tr style="text-align: center;">
<td name="name" id="metrics'+unique_id + '">Attendance - Team</td>
<td>
<input style="width: 50px; height: 30px; border-radius: 10%;" type="number" id="weightage'+unique_id + '" name="weight" value="10">
</td>
<td>
<input style="width: 20px; margin-bottom: 10px; border: none;" type="text" class="ex2SliderVal1" value="20">
<input style="width: 85px; margin-right: 40px;" id="ex" type="text" class="span2" value="" data-slider-min="0" data-slider-max="100" data-slider-value="[20,80]"/> 
<input style="width: 25px; border: none; margin-left: 5px;" type="text" class="ex2SliderVal2" value="80">
</td>
<td>
 <input style="width: 20px; margin-bottom: 10px; border: none;" type="text" class="ex3SliderVal1"  value="20">
<input style="width: 85px; margin-right: 40px;" id="lx" type="text" class="span2" value="" data-slider-min="0" data-slider-max="100" data-slider-value="[20,80]"/> 
<input style="width: 25px; border: none; margin-left: 5px;" type="text" class="ex3SliderVal2"  value="80">
</td>
<td>
<input style="width: 20px; margin-bottom: 10px; border: none;" type="text" class="ex4SliderVal1"  value="20">
<input style="width: 85px; margin-right: 40px;" id="zx" type="text" class="span2" value="" data-slider-min="0" data-slider-max="100" data-slider-value="[20,80]"/> 
<input style="width: 25px; border: none; margin-left: 5px;" type="text" class="ex4SliderVal2" value="80">
</td>
<td>
<a class="add" title="Add" data-toggle="tooltip"><i class="material-icons">&#xE03B;</i></a>
<a class="edit" title="Edit" data-toggle="tooltip"><i class="material-icons">&#xE254;</i></a>
<a class="delete" title="Delete" data-toggle="tooltip"><i class="material-icons">&#xE872;</i></a>
</td>
</tr>

JS代码

$(".add-new").click(function(){
        $(this).attr("disabled", "disabled");
        var index = $("table tbody tr:last-child").index();
        var unique_id=1
        unique_id++
        var i = 1
        i++
        var row = '<tr style="text-align: center;">' +
        '<td><input type="text" class="form-control" name="metrics" id="metrics'+unique_id + '"></td>' +
        '<td><input style="width: 50px; height: 30px; border-radius: 10%;" id="weightage'+unique_id + '" type="number" name="weightage"></td>' +
        '<td><input style="width: 20px; margin-bottom: 10px; border: none;" type="text" id="ex'+i+'SliderVal1" value="20"><input style="width: 85px; margin-right: 40px;" id="ex'+unique_id + '" type="text" class="span2" value="" data-slider-min="0" data-slider-max="100" data-slider-value="[20,80]"/><input style="width: 25px; border: none; margin-left: 5px;" type="text" id="ex'+i+'SliderVal2" value="80"></td>' +
        '<td><input style="width: 20px; margin-bottom: 10px; border: none;" type="text" id="lx'+i+'SliderVal1" value="20"><input style="width: 85px; margin-right: 40px;" id="lx'+unique_id + '" type="text" class="span2" value="" data-slider-min="0" data-slider-max="100" data-slider-value="[20,80]"/><input style="width: 25px; border: none; margin-left: 5px;" type="text" id="lx'+i+'SliderVal2" value="80"></td>' +
        '<td><input style="width: 20px; margin-bottom: 10px; border: none;" type="text" id="zx'+i+'SliderVal1" value="20"><input style="width: 85px; margin-right: 40px;" id="zx'+unique_id + '" type="text" class="span2" value="" data-slider-min="0" data-slider-max="100" data-slider-value="[20,80]"/><input style="width: 25px; border: none; margin-left: 5px;" type="text" id="zx'+i+'SliderVal2" value="80"></td>' +
        '<td>' + actions + '</td>' +
        '</tr>';

        $("table").append(row); 
        $("table tbody tr").eq(index + 1).find(".add, .edit").toggle();
        $('[data-toggle="tooltip"]').tooltip();

        $("#ex"+unique_id + "").slider({});
        $("#ex"+unique_id + "").on("slide", function(slideEvt) {
            $("#ex"+i+"SliderVal1").val(slideEvt.value[0]);
            $("#ex"+i+"SliderVal2").val(slideEvt.value[1]);
        });

        $("#lx"+unique_id + "").slider({});
        $("#lx"+unique_id + "").on("slide", function(slideEvt) {
            $("#lx"+i+"SliderVal1").val(slideEvt.value[0]);
            $("#lx"+i+"SliderVal2").val(slideEvt.value[1]);
        });
        $("#zx"+unique_id + "").slider({});
        $("#zx"+unique_id + "").on("slide", function(slideEvt) {
            $("#zx"+i+"SliderVal1").val(slideEvt.value[0]);
            $("#zx"+i+"SliderVal2").val(slideEvt.value[1]);
        });

    });