javascript - JQuery Datepicker は動的入力では機能しますが、元の入力では機能しません

Question

私はjavascriptとhtmlを学んでいるので、これが簡単な質問ではないことを願っています. このサイトで私の質問の多くに対する解決策を見つけました (コミュニティのおかげです) が、これは私を困惑させています.

最後の要素が満たされたときに要素を追加する動的テーブルを作成しようとしています。各要素には、日付と特定のコードの 2 つのコンポーネントがあります。データセルをクリックして入力を表示し、Enter キーを押すかクリックして入力を非表示にします。私の問題は、JQuery の日付ピッカーにあります。このフィドルを参照してください：

http://jsfiddle.net/VEL7d/

問題:日付ピッカーが元のデータセルに対して正しく機能しません。日付入力を初めてクリックすると、日付ピッカーが表示されますが、日付を選択しても消えません。次に、最初のデータセルの日付入力を 2 回目に選択しようとすると、datepicker がまったく表示されません。

日付ピッカーは、動的に生成されたすべてのコンテンツに対して正常に機能します。つまり、javascript を使用して生成されたすべてのデータセルは正常に機能します。興味深いことに、日付を 2 回目にクリックすると元の「日付」文字列が表示されますが、日付ピッカーがリンクされている入力ボックスから日付を取得することもできます。

私が試したこと：

スタックオーバーフローを見ています。多くの人が以前に問題を抱えていたことを知り、多くのことを学びました. ただし、これまでこの問題に遭遇したことはありません。ほとんどの人は、動的に作成されたコンテンツに日付ピッカーを添付するという問題を抱えているようですが、私はその問題を抱えていません。
.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