函数刷新后工作，jquery语句在添加jquery mobile后不起作用，jquery在使用cordova

Question

编辑：我开了一个新帖子OnClick works only works after reload, using jquerymobile

但随意回答这个问题。我会在septemeber 30日把它删除。如果没有答案！

稍后编辑查看日期： 我用js替换了很多jquery语句。现在好了。但刷新的问题仍然存在。如果有人可能有答案。我试过例如：

$("#anchor0").live("click", dateElementClicked($("#anchor0")));

问题是他运行，加载页面后的功能。但是找不到锚并卡在那里！

原件： 我正在使用cordova制作应用程序并且总是只尝试使用浏览器。不，我再次在Android手机上测试它，并意识到，很多jquery功能都无法正常工作，所以我读了一点并添加了jquery mobile（我发现，更多的是用于UI Stuff）。

我现在有一些大问题：

在移动设备上刷新页面（在浏览器中）之后运行的某些JS功能无效。例如，我在打开页面后添加了一个新的“DateElement”（带有a的div）和“newDateElement（）”函数。在添加jq mobile之前，它运行良好。现在我需要刷新。即使我手动添加html中的第一个元素，我必须刷新，该函数可以正常工作。

<div data-role="main" class="ui-content">
            <div class="divRollOut" id="unrolled">
                <a data-role="button" onclick="dateElementClicked(this)">Neuen Termin Hinzufügen</a>
            </div>

        </div>

脚本：

// the first dateElement
        $(document).on("mobileinit", newDateElement());
        //$(".ui-content").live(newDateElement());
        //newDateElement();

在新的这个功能也是一些问题。添加元素时，仅仅声明a，作为data-role =“按钮”是不够的，但我必须手动添加类和角色。

function newDateElement() {

            //$(".ui-content").append("<div class='divRollOut' id='unrolled'><a data-role='button' onclick='dateElementClicked(this)'>Neuen Termin Hinzufügen</a></div>");
            // $(".ui-content").trigger('create');

            var newDateElement = $(document.createElement('div')).attr("class", 'divRollOut');
            newDateElement.after().html("<a data-role='button' onclick='dateElementClicked(this)' class='ui-link ui-btn ui-shadow ui-corner-all' role='button'>Neuen Termin Hinzufügen</a>");
            newDateElement.appendTo(".ui-content");
            alert("newDateElement");

        }

另一个问题是：在添加jq mobile之前，这也适用于浏览器（不在移动设备上）。

function dateElementClicked(clickedAnchor) {
            newDateElement();
           if ($(clickedAnchor).parent().attr("id") == "unrolled")
            {
                dateElementClickedFirstTime(clickedAnchor);
                newDateElement();
            }
            else if (appointmentList[getDateElementNumber(clickedAnchor)]["RolledOut"] == true)
            {
                hideInput(getDateElementNumber(clickedAnchor));

            }
            else if (appointmentList[getDateElementNumber(clickedAnchor)]["RolledOut"] == false)
            {
                showInput(getDateElementNumber(clickedAnchor));
            }
            else
            {
                alert("Element not listed");
            }

        }

控制台说$（...）。parent（..）。attr（...））是未定义的（retunr括号中的东西。

 //gets the Number of the Dateelement of a clicked Anchor
        function getDateElementNumber(clickedAnchor) {
            alert($(clickedAnchor).attr("id"));
            alert(($(clickedAnchor).parent().attr("id")));
            return(($(clickedAnchor).parent().attr("id")).slice(-1));

        }

它处理如果单击“a”会发生什么。 Id折叠oder decollapse div并且在第一次单击“a”时，它添加了一个新的DateElement并将一些html内容添加到“a”的父div中。问题，是

// if a is clicked the first Time
        function dateElementClickedFirstTime(clickedAnchor) {
            //adding the html stuff
            var div = $(clickedAnchor).parent(".divRollOut");
            div.attr("id", "dateElement" + numberOfAppointments);
            div.appendTo("<p id='labelDate'>Datum: <input id='day' value=''/><input id='month' value='MM'/><input class='big' id='year' value='YYYY'/></p>");
            div.appendTo("<p id='labelTime'>Uhrzeit: <input id='hour' value='hour'/><input id='min' value='min'/></p>");
            div.css("background-color", "#009688");

            //adding to apoinment list
            appointmentList[numberOfAppointments] = new Object();
            appointmentList[numberOfAppointments]["Id"] = numberOfAppointments;
            appointmentList[numberOfAppointments]["Date"] = new Date();
            appointmentList[numberOfAppointments]["RolledOut"] = true;

            //decide which Time and Date will be preconfigured
            var dateTime = appointmentList[numberOfAppointments]["Date"];

            if (numberOfAppointments == 0) {
                setCurrentTime(numberOfAppointments, dateTime);
            }

            else if (numberOfAppointments == 0) {
                dateTime.setHours(dateTime.getHours() + numberOfAppointments);
                setCurrentTime(numberOfAppointments, dateTime);
            }


            //countig up the ID counter (must come at last)
            numberOfAppointments += 1;
        }

如果有人有解决方案，我会非常感激。这是我的bachleor论文，我没有多少时间。我在这里要做的是：

如果页面为opend

，则添加新的DateItem

点击“a”时。将新的DateItem和一些东西添加到“a”

的“div”中

当它倒塌它时。

以下是git的链接：https://github.com/LosKartoflos/Apoll.git

和整个代码：

<html>
<head>
    <title>SetDate</title>
    <meta charset="UTF-8">
    <meta http-equiv="Content-Security-Policy" content="default-src 'self' data: gap: https://ssl.gstatic.com 'unsafe-eval'; style-src 'self' 'unsafe-inline'; media-src *">
    <meta name="format-detection" content="telephone=no">
    <meta name="msapplication-tap-highlight" content="no">
    <meta name="viewport" content="user-scalable=no, initial-scale=1, maximum-scale=1, minimum-scale=1, width=device-width">

    <link href="../../../css/jquery.mobile-1.4.5.min.css" rel="stylesheet" type="text/css"/>
    <link rel="stylesheet" type="text/css" href="../../../css/style.css">


</head>

<body>   
    <script type="text/javascript" src="cordova.js"></script>
    <script type="text/javascript" src="../../../js/index.js"></script>
    <script type="text/javascript" src="../../../js/jquery.min.js"></script>
    <script type="text/javascript" src="../../../js/jquery.mobile-1.4.5.min.js"></script>


    <div data-role="page">
        <div data-role="header">               
            <h1>Zeiten</h1>
        </div>

        <div data-role="main" class="ui-content">
            <div class="divRollOut" id="unrolled">
                <a data-role="button" onclick="dateElementClicked(this)">Neuen Termin Hinzufügen</a>
            </div>

        </div>

        <div data-role="footer"  data-position="fixed">
            <a  href="Schedule_settings.html" data-transition="slide" data-direction="reverse" >Zur&uuml;ck</a>
            <a  href="Schedule_End.html" data-transition="slide" style="float: right" >Weiter</a>
        </div>
    </div> 

    <script>
        //$.mobile.loadingMessage = false;
        //$.mobile.hidePageLoadingMsg();

        //jQuery(document).on("mobileinit", function () {
        //    jQuery.mobile.autoInitializePage = false;
        //});
        // the first dateElement
        //$(document).on("mobileinit", newDateElement());
        //$(".ui-content").live(newDateElement());
        //newDateElement();
        var numberOfAppointments = 0;
        var apointment = {
            id: 0,
            date: 0,
            rolled: false
        };
        var appointmentList = new Array();

        /*$("a").click(function () {
            alert("a clicked");
            dateElementClicked(this);

        });*/
        /*Controls what happens if a dateElement is clicked:
         * 
         * if its the first time it will change to a normal dateElement
         * else it will be pop out an will be editable or shrink
         */

        function dateElementClicked(clickedAnchor) {
            newDateElement();
           /*if ($(clickedAnchor).parent().attr("id") == "unrolled")
            {
                dateElementClickedFirstTime(clickedAnchor);
                newDateElement();
            }
            else if (appointmentList[getDateElementNumber(clickedAnchor)]["RolledOut"] == true)
            {
                hideInput(getDateElementNumber(clickedAnchor));

            }
            else if (appointmentList[getDateElementNumber(clickedAnchor)]["RolledOut"] == false)
            {
                showInput(getDateElementNumber(clickedAnchor));
            }
            else
            {
                alert("Element not listed");
            }*/

        }

        //gets the Number of the Dateelement of a clicked Anchor
        function getDateElementNumber(clickedAnchor) {
            alert($(clickedAnchor).attr("id"));
            alert(($(clickedAnchor).parent().attr("id")));
            return(($(clickedAnchor).parent().attr("id")).slice(-1));

        }

        // if a is clicked the first Time
        function dateElementClickedFirstTime(clickedAnchor) {
            //adding the html stuff
            var div = $(clickedAnchor).parent(".divRollOut");
            div.attr("id", "dateElement" + numberOfAppointments);
            div.appendTo("<p id='labelDate'>Datum: <input id='day' value=''/><input id='month' value='MM'/><input class='big' id='year' value='YYYY'/></p>");
            div.appendTo("<p id='labelTime'>Uhrzeit: <input id='hour' value='hour'/><input id='min' value='min'/></p>");
            div.css("background-color", "#009688");

            //adding to apoinment list
            appointmentList[numberOfAppointments] = new Object();
            appointmentList[numberOfAppointments]["Id"] = numberOfAppointments;
            appointmentList[numberOfAppointments]["Date"] = new Date();
            appointmentList[numberOfAppointments]["RolledOut"] = true;

            //decide which Time and Date will be preconfigured
            var dateTime = appointmentList[numberOfAppointments]["Date"];

            if (numberOfAppointments == 0) {
                setCurrentTime(numberOfAppointments, dateTime);
            }

            else if (numberOfAppointments == 0) {
                dateTime.setHours(dateTime.getHours() + numberOfAppointments);
                setCurrentTime(numberOfAppointments, dateTime);
            }


            //countig up the ID counter (must come at last)
            numberOfAppointments += 1;
        }

        //Time Validation

        //gets The entered Date Values of Specific box
        function getTimeOfdateElement(numberOfAppointments) {
            var dateTime = new Date(
                    $("#dateElement" + numberOfAppointments + " #year").val(),
                    $("#dateElement" + numberOfAppointments + " #month").val(),
                    $("#dateElement" + numberOfAppointments + " #day").val(),
                    $("#dateElement" + numberOfAppointments + " #hour").val(),
                    $("#dateElement" + numberOfAppointments + " #min").val()
                    );
            return (dateTime);
        }

        //apply the the Time from Textboxes to Current Item
        function applyTime(numberOfAppointments, dateTime) {

        }

        //fills the Textboxes with current time for the first use or with the next logical
        function setCurrentTime(numberOfAppointments, dateTime) {
            $("#dateElement" + numberOfAppointments + " #day").val(dateTime.getDate());
            $("#dateElement" + numberOfAppointments + " #month").val(dateTime.getMonth());
            $("#dateElement" + numberOfAppointments + " #year").val(dateTime.getFullYear());
            $("#dateElement" + numberOfAppointments + " #hour").val(dateTime.getHours());
            $("#dateElement" + numberOfAppointments + " #min").val(dateTime.getMinutes());
        }


        //Show and Hide

        //Hides in inputs and p of certain date Element
        function hideInput(numberOfAppointments) {
            $("#dateElement" + numberOfAppointments + " #day").hide();
            $("#dateElement" + numberOfAppointments + " #month").hide();
            $("#dateElement" + numberOfAppointments + " #year").hide();
            $("#dateElement" + numberOfAppointments + " #hour").hide();
            $("#dateElement" + numberOfAppointments + " #min").hide();
            $("#dateElement" + numberOfAppointments + " #labelDate").hide();
            $("#dateElement" + numberOfAppointments + " #labelTime").hide();

            appointmentList[numberOfAppointments]["RolledOut"] = false;
        }
        //Shows in inputs and p of certain date Element
        function showInput(numberOfAppointments) {
            $("#dateElement" + numberOfAppointments + " #day").show();
            $("#dateElement" + numberOfAppointments + " #month").show();
            $("#dateElement" + numberOfAppointments + " #year").show();
            $("#dateElement" + numberOfAppointments + " #hour").show();
            $("#dateElement" + numberOfAppointments + " #min").show();
            $("#dateElement" + numberOfAppointments + " #labelDate").show();
            $("#dateElement" + numberOfAppointments + " #labelTime").show();

            appointmentList[numberOfAppointments]["RolledOut"] = true;
        }




        /*adds a new Date Element to the Container div*/
        function newDateElement() {

            //$(".ui-content").append("<div class='divRollOut' id='unrolled'><a data-role='button' onclick='dateElementClicked(this)'>Neuen Termin Hinzufügen</a></div>");
            // $(".ui-content").trigger('create');

            var newDateElement = $(document.createElement('div')).attr("class", 'divRollOut');
            newDateElement.after().html("<a data-role='button' onclick='dateElementClicked(this)' class='ui-link ui-btn ui-shadow ui-corner-all' role='button'>Neuen Termin Hinzufügen</a>");
            newDateElement.appendTo(".ui-content");
            alert("newDateElement");

        }
    </script>

</body>