Jquery 适用于 JSFiddle 但不适用于计算机

Question

这是我从jsfiddle得到的答案。它在 fiddle 部分工作，但是当我将它移到我的计算机时它不工作。我替换了程序中的代码，还包含了所有外部资源库。但是，它仍然根本不起作用。

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>

我想你忘了添加 $(document).ready(function(){});

我在本地进行了测试，它正在运行。

Jquery 适用于 JSFiddle 但不适用于计算机

Jquery works in JSFiddle but not works in computer

html

javascript

jquery

jsfiddle