将JS分配给动态创建的ID

时间:2019-07-17 06:26:03

标签: javascript html

我有动态创建的Range Slider。所有的Range Slider都有2个文本框,用于存储最小值和最大值。我的代码生成ID,但是分配该值的JS代码无法应用于此ID。谁能帮我 ?

 $(document).ready(function(){
        $('[data-toggle="tooltip"]').tooltip();
            var actions = $("table td:last-child").html();
             var unique_id=1;
             var i =1;
        $(".add-new").click(function(){
        var index = $("table tbody tr:last-child").index();
        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="ex0'+(i)+'" 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="ex1'+(i)+'" value="80"></td>' +
        '<td><input style="width: 20px; margin-bottom: 10px; border: none;" type="text" id="lx0'+(i)+'" 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="lx1'+(i)+'" value="80"></td>' +
        '<td><input style="width: 20px; margin-bottom: 10px; border: none;" type="text" id="zx0'+(i)+'" 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="zx1'+(i)+'" value="80"></td>' +
        '<td>' + actions + '</td>' +
        '</tr>';

        $("table").append(row); 

        $('[data-toggle="tooltip"]').tooltip();

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

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

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

enter image description here

0 个答案:

没有答案