Jquery 在 JSFiddle 中有效，但在计算机中无效答案

【问题标题】：Jquery works in JSFiddle but not works in computerJquery 在 JSFiddle 中有效，但在计算机中无效
【发布时间】：2017-12-17 15:39:21
【问题描述】：

这是我从 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>

【问题讨论】：

控制台有错误吗？
以前没有在我以前的版本代码中出现错误，但现在这是答案修改并且可以在小提琴中使用但是当我尝试将它合并到我的代码中甚至创建一个新文件来处理时此代码也无法正常工作。它应该能够添加文本框，然后选择0.5何时显示时间文本框 span>
appendRow(); 在document . ready 内？把它拿出来......这个changeIt(rowIndex);也是如此
如果取出来，appendRow函数应该放在哪里？
out side document.ready 只需将 x 作为参数传递给该函数

标签： javascript jquery html jsfiddle

【解决方案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>

【讨论】：

或者，您可以将脚本包装在 jquery onReady 函数中，并确保在脚本之前包含 jquery
非常感谢您的建议，现在运行良好:)

【解决方案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(){});

我在本地进行了测试，并且可以正常工作。

【讨论】：