CODEWITHSUNDEEP
jquery
miniMax
miniMax

Reputation: 19

Can't get function .on("click")

I can't get the "createMyEvent" function with "span id="detailKalender". Every time i load the "detailPage", the createMyEvent function fires. It should fire only on click by the span "#detailKalender". Any suggestions?

I'm using: https://github.com/EddyVerbruggen/Calendar-PhoneGap-Plugin/tree/pre-3.0, jquery-1.11.0, jquery.mobile-1.3.2 and phonegap 2.9.

Any help is greatly appreciated!

  // JavaScript
  $('#detailPage').live('pageshow', function(event) {
      var id = getUrlVars()["id"];
      $.getJSON(serviceURL + 'getDetail.php?id='+id, displayDetail);
   });

  function displayDetail(data) {
      var detailVar = data.item;
      console.log(detailVar);

  // title            
      $('#detailTitel').text(detailVar.titel);
  //location      
      $('#detailLocation').text(detailVar.location);
  // date     
      $('#detailDatum').text(detailVar.datum);    
  // end date     
      $('#detailDatumEnde').text(detailVar.datumEnde); 

  createMyEvent(detailVar);   
  }
  //  Calendar
   // prep some variables
   function createMyEvent(detailVar){

        var startDate = new Date(detailVar.datumStart);    
        var endDate = new Date(detailVar.datumEnde);   
        var title = detailVar.titel;                                                   
        var location = detailVar.location;                                          
        var notes = "myNotes";
        var success = function(message) { alert("my alert"); };
        var error = function(message) { alert("Error: " + message); };

        // create
        window.plugins.calendar.createEvent(title,location,notes,startDate,endDate,success,error);    
  }           

  function getUrlVars() {
      var vars = [], hash;
      var hashes = window.location.href.slice(window.location.href.indexOf('?') + 1).split('&');
      for(var i = 0; i < hashes.length; i++)
      {
          hash = hashes[i].split('=');
          vars.push(hash[0]);
          vars[hash[0]] = hash[1];
      }
      return vars;
  }

html:

    <div id="detailPage" data-role="page">
    <span id="detailKalender">kalender</span>
    <script>          
        $( "#detailKalender" ).on("click", createMyEvent);
    </script>   
    </div>

Upvotes: 0

Views: 51

Answers (1)

adeneo
adeneo

Reputation: 318192

When a page loads, the following function is called

$('#detailPage').live('pageshow', function(event) { // live() is deprecated
  var id = getUrlVars()["id"];
  $.getJSON(serviceURL + 'getDetail.php?id='+id, displayDetail);
});

So when the JSON is loaded, it calls the callback function, in this case displayDetail().
That function looks like

function displayDetail(data) {

    ... code

    createMyEvent(detailVar);   
}

and there you have it, you're calling the createMyEvent() function on every pageload

Upvotes: 3

Related Questions