We Keep Coding

dynamicaly change an element if it is changed by a different script

I am writing a script that modifies the content on a page. The content is generated from a different script that I am unable to modify. My code works fine when the page is initially loaded. But when the user clicks a link (which causes the other script to run) then all my content modifications are lost. I am able to catch the event that causes the change by using $(a.pagination_button).on("click",function(){ code }) But whatever code I put in is not having any effect. It seems the other script is running after my .on function. What can I do to make my code execute after the other script so that my changes will be seen by the user?

Just listen on the document for clicks:
$(document).on("click","a.pagination_button",function() {
alert("exec code");
});

JS Triggers fire correctly only on every other pageload

I'm running JQ 1.10.2 and JQM 1.4.0 The code has been trimmed for explanation.
index.php: Contains a number of menu items and the following JS. When a menu item is clicked, the JS is executed on the destination page because of pagebeforeshow. The destination page contains links back to index.php.
$(document).on('pagebeforeshow',function() {
var baseHref = document.getElementsByTagName('base')[0].href;
var filename = baseHref.split('/').pop();
switch (filename) {
case 'page1.php':
$(this).on('tap','.log-item',function(){
$(this).children('.log-item-more').toggle();
});
break;
case 'page2.php':
//other js
break;
case 'page3.php':
//other js
break;
}
});
In short, that JS finds the destination's filename and uses a switch statement to determine which page-specific JS to load.
The unexplainable thing is that when I load up index.php and click the page1.php link, page1.php loads as expected and it's JS from the switch statement works as expected as well. Next, I click the link to go back to index.php, then click the link to goto page1.php, the page loads as expected but the JS doesn't fire this time.
If I repeat the back and forth, the JS works 1 time, then doesn't the next and continues in this predictable 'on/off' cycle. I've never seen this behavior before and I'm at a loss.
UPDATE:
After further looking into this. I realize that the code within the switch statement is initialized each time the page is created. That means that the .on('tap') event listener is initialized once on the 1st page load, 2x on the 2nd page load, 3x on the 3rd page load, etc. I'm using a toggle, which is hide or show, and that's why it appeared that the code was not working when in fact is was!
Now, my question is which event should I be listening for in place of pagebeforeshow to only be triggered the 1st time that particular page is loaded in the session?
UPDATE:
Looking at the jQuery Mobile API Documentation, it looks like pagecreate is the event listener I'm looking for, but it behaves just like pagebeforeshow and pageinit.
I don't know why these events are acting this way... are they broken in this version of jQM?
Or am I linking these pages incorrectly? Perhaps <a href='log.php' data-transition='flip'>Log Page</a> is the wrong way to construct the anchor?

SOLVED:
I was not following jQuery's jQuery's Multiple Page Temple Structure properly!
I structured each page to be wrapped in a <div data-role="page" id="pagename"> tag.
I then included each page's JS just before closing that page's data-role="page" tag. I did not wrap it in any event listener ($(document).on('pageinit',function(){ });)!
Lastly, on the dashboard.php (my webapp's home page, basically), I included data-prefetch="true" in each anchor tag.

Document.ready and a code that appears after it

I have a modal plugin on my page that shouts on $(document).ready but i also have another function (innerHTML) which puts the <a> 5-10 seconds after the page has been loaded, this way the modal doesn't work cause it's only working on the code that was there before it has been loaded.
I was thinking about making a function that will "click" on an existing <a> can it be done?
basically i need that when the <a> will appear it will open up the modal instead of going to chat.php
<a href=\"chat.php\" class=\"iframe\">
any help?

If you use bind method, or directly use onclick on your selectors, it will attach event to that specific control only if selector has results. Try to do same thing using live method, it will remember your event attachment even if your selector doesn't have any results, and if same kind of control is added later on, that event is automatically bonded to that control.
for example, if you are using
$('#btnSubmit').click(function(){ ... ); in document.ready replace it with $('#btnSubmit').live('click',function(){...}); this will fire click event even if you add btnSubmit after page load.

Execute JS on dialog onload

I would like to execute some JS function each time my YUI dialog gets loaded. I can't do that from body onload because that body tag belongs to parent page. I tried doing that by adding the function on onContentReady event. But that works only when the dialog gets loaded for the first time. Then if I close the dialog and reopen it, it doesn't work; probably because the content is already ready when the dialog was opened for the first time and hence the function is not called this time.
Any idea what can be done to solve this?

I decided to use dialog.changeContentEvent.subscribe to register the JS code I wanted to execute on dialog onload. This isn't exactly equivalent to onload but still suits my requirement.

Best practice for triggering events on calling page from an ajax page

I have a page that lists a bunch of files. This page can be accessed directly via a URL or it can be loaded in a modal dialog via ajax from a different page.
If the files page is loaded via ajax, I would like to allow the user to click the name of the file and trigger an action in the page which loaded the files page. For example, there is an article edit page. This page contains an "attach a file" button. When the user clicks the button, the files page is loaded in a modal dialog and when a filename is clicked, the id of the file is inserted into the article form and the dialog is closed. However there is also an event edit page with a similar button, but I would like to handle the filename-click event slightly differently on this page.
I'd like to handle these click events slightly differently depending on the calling page. At the moment I'm defining a handler function with global scope in the page containing the form to which files are being attached, then testing for that function in the the files-page when the filename is clicked and calling if it exists. It works but it feels a little hacky. Is there some kind of best practice for this sort of thing that I'm not aware of?
I'm using jQuery if this makes things easier in any way..

Instead of relying on a global handler function as the interface between pages, you could rely on custom events instead:
"calling page":
$(document).bind("fileClicked", function(event, fileName) {
alert(fileName);
});
"page loaded via ajax":
$(".file").click(function() {
$(document).trigger("fileClicked", [$(this).text()]);
});

You should look at jQuery Live
Attach a handler to the event for all elements which match the current selector, now and in the future.
When a Ajax page is loaded it's not processed by the DOM in the same way the main page was loaded, therefore using live will attach the event on all current event emitters as well as the future ones such as dynamic Ajax content
Within your Ajax model
<div>
...
Add to main page
...
</div>
and within your static page (the one originally loaded)
$("#ajax_click_event").live('click',function(){
//Work wit the value of the form within the ajax div.
})