We Keep Coding

Click event only fires when element is placed in header

I've got a single-page app UI with a custom navigation script. The script works perfectly in a minimally styled test page, but when I bring it into the actual app UI, it starts getting wonky and the click events are not firing consistently the way that I'd expect them to.
I have click events bound to each of the links, but the events only seem to fire when the element is placed in the header.
The HTML
<header>
<a data-role="navigation" data-target-view="mainView">Home</a>
<a data-role="navigation" data-target-view="settings">Settings</a>
<a id="headerLink" data-role="navigation" data-target-view="detailsView">Details</a>
</header>
<section data-role="page">
<section id="mainView" data-role="view">
<section class="pageContent">
</section>
<footer class="pageFooter">
<a id="footerLink" data-role="navigation" data-target-view="detailsView">Details</a>
</footer>
</section>
<section id="detailsView" data-role="view">
<section class="pageContent">
</section>
<footer class="pageFooter">
</footer>
</section>
<section id="settings" data-role="view">
<section class="pageContent">
</section>
<footer class="pageFooter">
</footer>
</section>
</section>
Handler Registration
$(document).ready(function(){
$("[data-role='navigation']")
.unbind("click.cgt_pathfinder")
.bind("click.cgt_pathfinder",function(event){
alert("Triggered");
});
});
I've stripped out the actual navigation logic just to make this easier to follow.
The Issue
When I load the page, I've got a breakpoint set on my handler registration, and I can see all the elements retrieved by $("[data-role='navigation']"). I see 4 elements: The three links in the <header>, and the one solitary link in the .pageFooter section of #mainView.
You'll notice that (save for the ID attribute and their location on the page), #headerLink and #footerLink are identical.
When I click #footerLink, nothing happens. I know the element was picked up when I registered my event handler, so it should issue the "Triggered" alert message, but it doesn't.
I've also tried moving #footerLink around the document (pulling it up one layer at a time and testing at each stop. The event did not fire until the link was in the <header>
When I click #headerLink, the event fires exactly as expected. In this example, I receive the "Triggered" message, and in the actual app, I see a successful navigation event.
So, the question is: "What am I missing?" There's something different about #footerLink that's preventing the event from firing, but I'm at a loss.

Possibly typo and unbalanced tag
<section data-role="page">
<section id="mainView data-role="view"> // No (") for id
<section class="pageContent">
</section>
Near bottom of markup
</settings> // No opening tag for settings
</section>
Working jsfiddle

I have checked your case. But it is working fine for me.
Please replace your jQuery function with this:
$(document).ready(function(){
$("[data-role='navigation']").unbind("click.cgt_pathfinder").bind("click.cgt_pathfinder",function(event){
alert("Triggered = "+$(this).text());
});
});

Does your code dynamically update the #footerLink element ?
If this element gets added to the page by your code (e.g : through a $('.pageFooter').append(html)), you will need to bind back the click action to this new element.
Is there any other code (yours or some plugin's) which could alter the click event handlers in your page, but not in your header ?

jQuery Mobile objects stay in memory

I am currently developing a jQuery mobile app. On one page there is a chart created (highcharts) which then can be exported (canvg and canvas2ImagePlugin). However, I noticed that the chart object stays in memory. This has the effect that if the page is opened multiple times and the export button is then pressed, all the previously generated graphs will be exported.
Having a look at Chrome Dev Tool's heap snapshot, I noticed that all the objects stay in memory. To demonstrate this, I made a very basic app on jsfiddle, leaving all the highchart and canvg code out: http://jsfiddle.net/dreischer/Lt4Xw/ --> just click on the button to go to the second page. If you click the export button a pop-up will open. However, if you go back to page one and then page two and click the button again, two pop-ups will open (you might need to allow pop-ups).
I also tried setting analyseGraph null or undefined or using .remove() on pagebeforehide but it didn't help.
Thank you for your help!
Here is the code, for this example:
HTML:
<div data-role="page" id="p1">
<div data-role="header"><h1>Header Page 1</h1></div>
<div data-role="content">
<p>Page 1</p>
Go To Page 2
</div>
</div>
<div data-role="page" id="p2">
<div data-role="header" data-rel="back"><h1>Header Page 2</h1></div>
<div data-role="content">
<p>Page 2</p>
Go To Page 1
<a id="export_graph" data-role="button" style="max-width: 300px;" data-mini="true">Export</a>
</div>
</div>
Javascript:
$(document).on('pagebeforeshow', '#p2', function (){
var Graph = function (){
this.drawGraph = function(){};
this.exportCanvas = function(){
window.open();
};
}
var analyseGraph = new Graph();
analyseGraph.drawGraph();
$(document).on('click', '#export_graph', function(){
analyseGraph.exportCanvas();
});
});

Every time you show page 2 you bind a click event to document. So I think you must use 'off' once in a while, like this
$(document).on('click', '#export_graph', function(){
analyseGraph.exportCanvas();
$(document).off('click');
});

jQuery Mobile multiple pages causing problems when calling a panel

I have an HTML document with multiple pages using jQuery Mobile's data-role="page". I am trying to call a panel on the second page but am receiving the error
cannot read property 'nodeType' of undefined
The error occurs when I try to transition to the second page. My basic page structure is as follows:
<body>
<div data-role="page" id="page1">
Enter Page 2
</div>
<div data-role="page" id="page2">
<h3> tthis is page 2 </h3>
<input type="button" id="myButton"> My Button </input>
<div data-role="panel" id="myPanel">
<p> Panel content </p>
</div>
</div>
</body>
The panel is being called through a function, but I still receive the same error when I comment out the function.
$(document).ready(function() {
$('#myButton').on('click', function() {
$('#myPanel').panel('open')
})
})
The panel works if it is on the first page and if I define it on the first page and open it on the second, it still opens on the first. It is there when I hit the back button. I am using jQuery Mobile too is that has an effect on anything.
Why am I receiving this error? Is there a simple solution or do I need hack my way around this by creating the panel dynamically? Thanks.

First off, never use .ready() in jQuery Mobile.
Important: Use $(document).bind('pageinit'), not $(document).ready()
The first thing you learn in jQuery is to call code inside the $(document).ready() function so everything will execute as soon as the DOM is loaded. However, in jQuery Mobile, Ajax is used to load the contents of each page into the DOM as you navigate, and the DOM ready handler only executes for the first page. To execute code whenever a new page is loaded and created, you can bind to the pageinit event. This event is explained in detail at the bottom of this page.
Source: http://jquerymobile.com/demos/1.2.0/docs/api/events.html
Secondly, each page should have its' own panel with a different id, and the div containing the panel should be a direct child of data-role=page.
Panel markup/structure:
<div data-role="panel" id="id" data-position="left" data-display="push" data-theme="b">
<!-- Contents -->
</div>
Opening a panel:
Statically by using anchor/button:
Open
Dynamically:
$.mobile.activePage.find('[data-role=panel]').panel('open');
// Or
$('#panel_id').panel('open');
Closing a panel:
(in case data-dismissible is set to false)
Statically by using anchor/button (Note: It should be placed inside Panel div):
Close
Dynamically:
$.mobile.activePage.find('[data-role=panel]').panel('close');
// Or
$('#panel_id').panel('close');
Demo

after open event of pop up not working

I have a jquery mobile popup. I want after it opened to perform some things. The problem is not coming to the event:
$(document).ready(function () {
$("#alertsPopup1").bind({
popupafteropen: function (event, ui) { alert('popup'); }
});
});
Here the pop up in the html:
<div data-role="popup" data-corners="false" class="alertsPopup"
id="alertsPopup1" data-theme="e" data-overlay-theme="b" class="ui-content">
<p>
aaaa</p>
</div>
I can not understand what the problem is, it passes the bind without problems (I tested in Chrome's console).
I'd appreciate some help.

First don't use document ready with jQuery Mobile, sometimes it will trigger before jQuery Mobile can process page correctly inside the DOM. Read here why.
Instead of document ready you should use proper jQuery Mobile page events. Read more about them in a previous link.
Also if possible use delegated event binding. Basically use on function to bind an event and bind it to a document level. Delegated event binding should solve the problem of document ready usage, mainly because it doesn't care if popup exist / don't exist inside the DOM.
Javascript :
$(document).on('pagebeforeshow', '#index', function(){
$(document).on("popupafteropen", "#alertsPopup1",function( event, ui ) {
alert('popup');
});
});
HTML :
<div data-role="page" id="index">
<div data-role="content">
Open Popup
<div data-role="popup" data-corners="false" class="alertsPopup"
id="alertsPopup1" data-theme="e" data-overlay-theme="b" class="ui-content">
<p>
aaaa</p>
</div>
</div>
</div>
Working example: http://jsfiddle.net/Gajotres/Jgajv/

.load event handler not working

I am attemtping to solve an issue I am having and decided to try the event handler for the .load() jQuery function. I am unsure what I did wrong. The example on the jQuery page is:
$('#book').load(function() {
// Handler for .load() called.
});
my script was:
var $j = jQuery.noConflict();
$j('#gallery-nav-instruct').load(function() {
if(!$j.cookie('gallerycookie')){
$j.colorbox({ inline:true, href:"#gallery-nav-instruct"});
$j.cookie("gallerycookie", 1, {expires: 30, path: '/'});
}
});
Why did my script not work?
Here is the HTML related to that script:
<div style="display:none">
<div id="gallery-nav-instruct">
<h2>Gallery Navigation Instructions - Step 1</h2>
<h2 style="text-align:right">
<a style="text-align:right;" class="inline cw" href="#gallery-enlarge-instruct">Step 2</a>
</h2>
<p> </p>
<p class="white">
<img src="/Images/Pages/gallery-navigation.jpg" width="890" height="450" alt="Gallery Navigation Instructions" />
</p>
</div>
</div>

Do you have a way of confirming that the div isn't already loaded by the time the event is bound? In other words, it could be a timing issue. The load completes, the event is bound, but the event is never fired because the load is already complete.
I would be interested in knowing the problem you're trying to solve; rather than trouble-shooting the .load() itself (although that might end up being the tool after all!) it's best to allow room for lateral thinking. For example, I don't see why you couldn't do your cookie check and colorbox initialization on document ready. It may be that the image isn't loaded yet, but I don't think that would break user experience.

Try putting your script at the end of the page. That might work. It will execute only when all the content is loaded as .load() event is called when all the stuff inside the parent is loaded completely.
This should help you