Question

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

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

http://jsfiddle.net/VEL7d/

问题：日期选择器无法正常处理原始数据单元格。第一次单击日期输入时，日期选择器会显示，但在您选择日期时不会消失。然后，第二次尝试选择第一个数据单元格的日期输入时，datepicker根本不会显示。

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

我尝试过的事情：

查看stackoverflow。我之前看到很多人都遇到过这个问题，而且我学到了很多东西。但是，我之前没有遇到过这个问题。似乎大多数人都有将datepicker附加到动态创建的内容的问题，但我没有这个问题。
我尝试将.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>

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

0 个答案: