Question

I am relatively new to jquery and jquery mobile. I have a new mobile site that uses the ajax loading of pages. The problem of course is that it will not load the script on each page so the script has to go onto the home page with the menu.

I use the pagecreate to listen for the page and then load the script for it.

The problem I am having is that on one page I have a submit button which calls a function. The pagecreate does its job and loads the script but when I click the submit button the function does not get called. The function is ok on it’s own, so the problem must be that you cant just put a function into the pagecreate.

I am not sure what is the correct syntax.

        $('#calendar').live('pagecreate',function(event){
            function makeUpDates(){
                // concantenate values to date_start and date_end hidden inputs
                var dateString = document.getElementById('date').value,
                date = new Date(dateString);

                document.getElementById('date_start').value = date.getFullYear() + '-' + (date.getMonth()+1) + '-' + date.getDate();

                var numDays = document.getElementById('slider').value;
                date.setDate(date.getDate() + parseInt(numDays));   

                var dateEnd = date.getFullYear() + '-' + (date.getMonth()+1) + '-' + date.getDate();
                document.getElementById('date_end').value = dateEnd;

            }
        });         

Answer 1

UPDATE:

Would this work

HTML (page with id=’calendar’), removed onclick and added id

<button type="submit" name="continue" id="continue" data-icon="arrow-r" data-iconpos="right">Continue</button>

JS

$('#calendar').live('pagecreate',function(event){
    // Call function when live event happens         
    $('#continue').click(function() {
        makeUpDates();
    });
});

// Move function outside live event
function makeUpDates() {
    // concantenate values to date_start and date_end hidden inputs
    var dateString = document.getElementById('date').value,
    date = new Date(dateString);

    document.getElementById('date_start').value = date.getFullYear() + '-' + (date.getMonth()+1) + '-' + date.getDate();

    var numDays = document.getElementById('slider').value;
    date.setDate(date.getDate() + parseInt(numDays));   

    var dateEnd = date.getFullYear() + '-' + (date.getMonth()+1) + '-' + date.getDate();
    document.getElementById('date_end').value = dateEnd;
}

I’m not sure you even need the live event, you could try this as well

//$('#calendar').live('pagecreate',function(event){
    // Call function when live event happens         
    $('#continue').click(function() {
        makeUpDates();
    });
//});