将JS代码应用于动态创建的范围滑块

Question

因此，我有一个“添加新子点”按钮，单击该按钮后，将使用3个范围滑块将新行添加到表中。我的问题是，每当我单击它时，JS代码都不会应用到它。我是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>';

        $("#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]);
        });


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

    });

] 1