javascript - JQuery Datepicker 适用于动态输入，但不适用于原始输入

Question

我只是在学习 javascript 和 html，所以我希望这不是一个简单的问题。我在这个网站上找到了许多问题的解决方案（感谢社区），但这个问题难倒了我。

我正在尝试创建一个动态表，当最后一个元素被填充时，它会在其中添加元素。每个元素有两个组成部分：日期和特定代码。您单击数据单元格以显示输入，然后当您按 Enter 或单击离开时，它会隐藏输入。我的问题是 JQuery 的日期选择器。看到这个小提琴：

http://jsfiddle.net/VEL7d/

问题：日期选择器不适用于原始数据单元格。第一次单击日期输入时，日期选择器会显示，但在您选择日期时不会消失。然后，您第二次尝试为第一个数据单元格选择日期输入时，日期选择器根本不显示。

日期选择器适用于所有动态生成的内容，即所有使用 javascript 生成的数据单元格都可以。有趣的是，我什至能够从日期选择器链接到的输入框中获取日期，即使您第二次单击日期时它显示原始的“日期”字符串。

我尝试过的事情：

看着stackoverflow。我看到很多人以前遇到过问题，我学到了很多东西。但是，我以前没有遇到过这个问题。似乎大多数人都有将日期选择器附加到动态创建的内容的问题，但我没有这个问题。
我尝试将 .datepicker 移动到不同的区域，包括一个 onload 部分，但它并没有改变任何东西。我知道将 .datepicker 函数调用到它所在的位置有点多余，但这实际上只是在我输入这个问题时它结束的地方。

我确信我的代码还有其他问题，但我确信我可以解决它们。这个与第一个数据单元格相关的日期选择器问题真的让我很难过。任何帮助表示赞赏。

我希望不必发布代码，因为代码很多而且我不确定问题可能出在哪里。这是HTML：

        <section id="chartData">

        <table id="cycle_1">
            <tr id="row1">
                <td class="dataEntry" id="cycle_1_day_1" cycle="1" cycleDay="1" colRef="gray" colDef="true">
                    <span id="cycle_1_day_1_dateText" class="dateText">Date</span>
                    <input id="cycle_1_day_1_dateInput" type="text" style="display: none;" class="dateInput" value="Date">
                    <span id="cycle_1_day_1_codeText" class="codeText">New</span>
                    <textarea style="display:none;" class="codeInput" id="cycle_1_day_1_codeInput">New</textarea>
                </td>
            </tr>
        </table>

    </section>

这是javascript：

<script>  
$("#chartData").on("click",".dataEntry",function()
{
    var ID=$(this).attr('id');
    document.getElementById(ID+"_codeInput").innerHTML = document.getElementById(ID+"_codeText").innerHTML
    $("#"+ID+"_codeText").hide();
    $("#"+ID+"_codeInput").show();
    $("#"+ID+"_dateText").hide();
    $("#"+ID+"_dateInput").show();
    $("#"+ID+"_dateInput").datepicker();
});

$("#chartData").on("change",".dataEntry",function()
{
    //Set the data block to the value of the input box when the input box loses focus
    var ID=$(this).attr('id');
    var codeInputData=$("#"+ID+"_codeInput").val();
    var dateInputData=$("#"+ID+"_dateInput").val();
    document.getElementById(ID+"_codeText").innerHTML=codeInputData;
    document.getElementById(ID+"_dateText").innerHTML=dateInputData;


    if ($("#"+ID).is(":last-child"))
    {
        //Get the cycle number and day for the selected data cell
        var currentCycle = parseInt($(this).attr("cycle"),10);
        var currentDay = parseInt($(this).attr("cycleDay"),10);
        currentDay = currentDay+1;

        //Set up new dateText box
        var dateTextNode = document.createElement("span");
        dateTextNode.setAttribute("class","dateText");
        dateTextNode.setAttribute("id","cycle_"+currentCycle.toString()+"_day_"+currentDay.toString()+"_dateText");

        //Set up new dateInput box
        var dateInputNode = document.createElement("input");
        dateInputNode.setAttribute("id","cycle_"+currentCycle.toString()+"_day_"+currentDay.toString()+"_dateInput");
        dateInputNode.setAttribute("type","text");
        dateInputNode.setAttribute("style","display:none;");
        dateInputNode.setAttribute("class","dateInput");
        dateInputNode.setAttribute("value","Date")

        //Set up new codeText box
        var codeTextNode = document.createElement("span");
        codeTextNode.setAttribute("class","codeText");
        codeTextNode.setAttribute("id","cycle_"+currentCycle.toString()+"_day_"+currentDay.toString()+"_codeText");

        //Set up the new codeInput box
        var codeInputNode = document.createElement("textarea");
        codeInputNode.setAttribute("style","display:none;");
        codeInputNode.setAttribute("class","codeInput");
        codeInputNode.setAttribute("id","cycle_"+currentCycle.toString()+"_day_"+currentDay.toString()+"_codeInput");

        //Create the new data cell
        var node=document.createElement("td");
        node.setAttribute("class","dataEntry");
        node.setAttribute("id","cycle_"+currentCycle.toString()+"_day_"+currentDay.toString());
        node.setAttribute("cycle",currentCycle.toString());
        node.setAttribute("cycleDay",currentDay.toString());
        node.appendChild(dateTextNode);
        node.appendChild(dateInputNode);
        node.appendChild(codeTextNode);
        node.appendChild(codeInputNode);
        document.getElementById(ID).parentNode.appendChild(node);
        document.getElementById("cycle_"+currentCycle.toString()+"_day_"+currentDay.toString()+"_codeText").innerHTML="New";
        document.getElementById("cycle_"+currentCycle.toString()+"_day_"+currentDay.toString()+"_codeInput").innerHTML="New";
        document.getElementById("cycle_"+currentCycle.toString()+"_day_"+currentDay.toString()+"_dateText").innerHTML="Date";

        if ($("#"+ID).parent().parent().is(":last-child"))
        {

            document.getElementById(ID).parentNode.parentNode.parentNode.innerHTML += "<br>";

            //Create new table
            currentCycle = currentCycle+1;
            var tableNode = document.createElement("table");
            tableNode.setAttribute("id","cycle_"+currentCycle.toString());

            //Modify the codeTextNode from above for the new table
            dateTextNode.setAttribute("id","cycle_"+currentCycle.toString()+"_day_1_codeText");

            //Modify the codeInputNode from above for the new table
            codeInputNode.setAttribute("id","cycle_"+currentCycle.toString()+"_day_1_codeInput");

            //Create a new data node for the new table
            var node=document.createElement("td");
            node.setAttribute("class","dataEntry");
            node.setAttribute("cycle",currentCycle.toString());
            node.setAttribute("cycleDay","1");
            node.setAttribute("id","cycle_"+currentCycle.toString()+"_day_1");
            node.appendChild(codeInputNode);
            node.appendChild(codeTextNode);

            //Create the new table
            trNode.appendChild(node);
            tableNode.appendChild(trNode);
            document.getElementById(ID).parentNode.parentNode.parentNode.appendChild(tableNode);
            document.getElementById("cycle_"+currentCycle.toString()+"_day_1_codeText").innerHTML="New";
            document.getElementById("cycle_"+currentCycle.toString()+"_day_1_codeInput").innerHTML="New";
        }

    }
});

// Edit input box click action and enter key
$("#chartData").on({
    mouseup: function() 
    {
        return false;
    },
    keypress: function(e)
    {
        if (e.keyCode == 13) {
            $(".codeInput").hide();
            $(".codeText").show();
            $(".dateInput").hide();
            $(".dateText").show();
            $(this).blur();
        }
    }
},".dateInput, .codeInput");

// Outside click action
$(document).on("mouseup", function()
    {
        $(".codeInput").hide();
        $(".codeText").show();
        $(".dateInput").hide();
        $(".dateText").show();
        $(this).blur();
    });
</script>

javascript - JQuery Datepicker 适用于动态输入，但不适用于原始输入

0 回答 0

Related

Reference