0

So I have got a button "Add new subpoint", on clicking the button a new row gets added to the table with 3 range slider. My problem is that whenever I click on it the JS code doesn't get applied to it. I'm new to JS can anyone please help me with the problem. 

$(".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();

    });

![enter image description here]1

Mayur Kandalkar
  • 204
  • 1
  • 5
  • 14
  • are you trying to apply JS on dynamically created elements? – Akash Jul 05 '19 at 10:22
  • yes . as shown in the image I want the slider to generate as JS code for the slider is not getting applied. so its show a plane input box – Mayur Kandalkar Jul 05 '19 at 10:24
  • 1
    refer this https://stackoverflow.com/questions/203198/event-binding-on-dynamically-created-elements – Akash Jul 05 '19 at 10:25
  • how do I apply "$("#ex"+unique_id + "").slider({});" this to each as each range slider needs new id – Mayur Kandalkar Jul 05 '19 at 10:25
  • 1
    It looks like it's because you're trying to set event handlers (such as `$("#ex"+unique_id + "").on`) before the elements have been added to the page, and therefore they don't yet exist. Move the `$("table").append(row); ` before you add the event handlers – freefaller Jul 05 '19 at 10:26
  • Something like $('.parent-element-class').on("click", '.target-element-class', function() { // Your code here }); – Akash Jul 05 '19 at 10:27
  • @freefaller , so should I add this code after appending a row ? – Mayur Kandalkar Jul 05 '19 at 10:27
  • That would be a start, but you're also going to hit issues with [`closure`](https://stackoverflow.com/questions/111102/how-do-javascript-closures-work) where the `i` will not be as you expect – freefaller Jul 05 '19 at 10:28
  • Can you try this ? $(document).on('input', "#ex"+unique_id, function() { //your code here }); – Akash Jul 05 '19 at 10:31

0 Answers0