jquery在JSFiddle中工作，但不适用于计算机

Question

这是我从jsfiddle得到的答案。它在小提琴部分工作，但当它移动到我的电脑时它不起作用。我替换了我的程序中的代码，并且还包含了所有的外部资源库。但是，它仍然没有工作。

var x = 1; 
 

 
function appendRow() { 
 
    var newTextBoxDiv = $(document.createElement('div')) 
 
    .attr("id", 'TextBoxDiv' + x); 
 
    // I ASSIGNED A CLASS CALLED INPUT TO THE ELEMENT YOU WANT TO SELECT 
 
    newTextBoxDiv.after().html("<div class='form-group'><label class='control-label col-sm-3' style='text-align:right;'>Date:</label><div class='col-sm-3'><div class='input-group date' ><span class='input-group-addon'><i class='fa fa-calendar'></i></span><input type='Date' class='form-control' name='Dates'> <select class='form-control input' id='slct" + x + "' name='Branch''><option disabled='' selected=''>Please Select Leave Day</option> <option value='1' >1</option><option value='0.5' >0.5</option></select></div></span></div><div id='container" + x + "'></div></div>"); 
 
    newTextBoxDiv.appendTo("#div"); 
 
    x++; 
 
} 
 

 

 
function changeIt(rowIndex) { 
 
    //i++; DO NOT INCREMENT I!!! IT WILL CREATE THE REFERRAL ERROR YOU HAD. BECAUSE THE FUNCTION WOULD BE REFERRING TO A NON-EXISTING INPUT ELEMENT. I REPLACED IT WITH ROWINDEX, WHICH IS INITIATED WHILE CALLING THE FUNCTION 
 
    var select = document.getElementById("slct" + rowIndex); 
 

 
    var divv = document.getElementById("container" + rowIndex); 
 
    var value = select.value; 
 

 
    if (value == 0.5) { 
 
    toAppend = "<label class='control-label col-sm-1'>Time:</label><div class='col-sm-2'><div class='input-group date' id = 'date'> <span class='input-group-addon'><i class='fa fa-clock-o'></i></span><input type='time' class='form-control' ></div></div><div class='col-sm-2'><div class='input-group date' id = 'dates'> <span class='input-group-addon'><i class='fa fa-clock-o'></i></span><input type='time' class='form-control' ></div></div>"; 
 
    divv.innerHTML = toAppend; 
 
    return; 
 
    } 
 
    if (value == 1) { 
 
    toAppend = ""; 
 
    divv.innerHTML = toAppend; 
 
    return; 
 
    } 
 
} 
 
$("#button").click(function() { 
 
    appendRow(); 
 
}); 
 
$("#div").on("change", ".input", function() { 
 
    //EXTRACT THE NUMBER FROM THE CLICKED ITEM'S ID 
 
    let rowIndex = $(this).attr("id").replace(/.[^0-9]/g, ""); 
 
    changeIt(rowIndex); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div id="div"> 
 
    <button value="Add Row" id="button">Add row</button> 
 
</div>

Answer 1

确保你的脚本的HTML低于您的按钮

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div id="div"> 
 
    <button value="Add Row" id="button">Add row</button> 
 
</div> 
 
<!-- your js goes here --> 
 
<script> 
 
var x = 1; 
 

 
    function appendRow() { 
 
     var newTextBoxDiv = $(document.createElement('div')) 
 
      .attr("id", 'TextBoxDiv' + x); 
 
     // I ASSIGNED A CLASS CALLED INPUT TO THE ELEMENT YOU WANT TO SELECT 
 
     newTextBoxDiv.after().html("<div class='form-group'><label class='control-label col-sm-3' style='text-align:right;'>Date:</label><div class='col-sm-3'><div class='input-group date' ><span class='input-group-addon'><i class='fa fa-calendar'></i></span><input type='Date' class='form-control' name='Dates'> <select class='form-control input' id='slct" + x + "' name='Branch''><option disabled='' selected=''>Please Select Leave Day</option> <option value='1' >1</option><option value='0.5' >0.5</option></select></div></span></div><div id='container" + x + "'></div></div>"); 
 
     newTextBoxDiv.appendTo("#div"); 
 
     x++; 
 
    } 
 

 

 
    function changeIt(rowIndex) { 
 
     //i++; DO NOT INCREMENT I!!! IT WILL CREATE THE REFERRAL ERROR YOU HAD. BECAUSE THE FUNCTION WOULD BE REFERRING TO A NON-EXISTING INPUT ELEMENT. I REPLACED IT WITH ROWINDEX, WHICH IS INITIATED WHILE CALLING THE FUNCTION 
 
     var select = document.getElementById("slct" + rowIndex); 
 

 
     var divv = document.getElementById("container" + rowIndex); 
 
     var value = select.value; 
 

 
     if (value == 0.5) { 
 
      toAppend = "<label class='control-label col-sm-1'>Time:</label><div class='col-sm-2'><div class='input-group date' id = 'date'> <span class='input-group-addon'><i class='fa fa-clock-o'></i></span><input type='time' class='form-control' ></div></div><div class='col-sm-2'><div class='input-group date' id = 'dates'> <span class='input-group-addon'><i class='fa fa-clock-o'></i></span><input type='time' class='form-control' ></div></div>"; 
 
      divv.innerHTML = toAppend; 
 
      return; 
 
     } 
 
     if (value == 1) { 
 
      toAppend = ""; 
 
      divv.innerHTML = toAppend; 
 
      return; 
 
     } 
 
    } 
 
    $("#button").click(function() { 
 
     console.log('test'); 
 
     appendRow(); 
 
    }); 
 
    $("#div").on("change", ".input", function() { 
 
     //EXTRACT THE NUMBER FROM THE CLICKED ITEM'S ID 
 
     let rowIndex = $(this).attr("id").replace(/.[^0-9]/g, ""); 
 
     changeIt(rowIndex); 
 
    });</script>

Answer 2

在这里，你去与解决方案

<!DOCTYPE html> 
 
<head> 
 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<script> 
 
    $(document).ready(function(){ 
 
var x = 1; 
 

 
    function appendRow() { 
 
     var newTextBoxDiv = $(document.createElement('div')) 
 
      .attr("id", 'TextBoxDiv' + x); 
 
     // I ASSIGNED A CLASS CALLED INPUT TO THE ELEMENT YOU WANT TO SELECT 
 
     newTextBoxDiv.after().html("<div class='form-group'><label class='control-label col-sm-3' style='text-align:right;'>Date:</label><div class='col-sm-3'><div class='input-group date' ><span class='input-group-addon'><i class='fa fa-calendar'></i></span><input type='Date' class='form-control' name='Dates'> <select class='form-control input' id='slct" + x + "' name='Branch''><option disabled='' selected=''>Please Select Leave Day</option> <option value='1' >1</option><option value='0.5' >0.5</option></select></div></span></div><div id='container" + x + "'></div></div>"); 
 
     newTextBoxDiv.appendTo("#div"); 
 
     x++; 
 
    } 
 

 

 
    function changeIt(rowIndex) { 
 
     //i++; DO NOT INCREMENT I!!! IT WILL CREATE THE REFERRAL ERROR YOU HAD. BECAUSE THE FUNCTION WOULD BE REFERRING TO A NON-EXISTING INPUT ELEMENT. I REPLACED IT WITH ROWINDEX, WHICH IS INITIATED WHILE CALLING THE FUNCTION 
 
     var select = document.getElementById("slct" + rowIndex); 
 

 
     var divv = document.getElementById("container" + rowIndex); 
 
     var value = select.value; 
 

 
     if (value == 0.5) { 
 
      toAppend = "<label class='control-label col-sm-1'>Time:</label><div class='col-sm-2'><div class='input-group date' id = 'date'> <span class='input-group-addon'><i class='fa fa-clock-o'></i></span><input type='time' class='form-control' ></div></div><div class='col-sm-2'><div class='input-group date' id = 'dates'> <span class='input-group-addon'><i class='fa fa-clock-o'></i></span><input type='time' class='form-control' ></div></div>"; 
 
      divv.innerHTML = toAppend; 
 
      return; 
 
     } 
 
     if (value == 1) { 
 
      toAppend = ""; 
 
      divv.innerHTML = toAppend; 
 
      return; 
 
     } 
 
    } 
 
    $("#button").click(function() { 
 
     console.log('test'); 
 
     appendRow(); 
 
    }); 
 
    $("#div").on("change", ".input", function() { 
 
     //EXTRACT THE NUMBER FROM THE CLICKED ITEM'S ID 
 
     let rowIndex = $(this).attr("id").replace(/.[^0-9]/g, ""); 
 
     changeIt(rowIndex); 
 
    }); 
 
    });</script> 
 
    </head> 
 
<body> 
 
<div id="div"> 
 
    <button value="Add Row" id="button">Add row</button> 
 
</div> 
 
<!-- your js goes here --> 
 

 
    </body> 
 
</html>

我想你忘了添加$（文件）。就绪（函数（）{}）;

我测试了我的本地&它的工作。