We Keep Coding

Getting a jQuery function to fire

I have a very simple jQuery function
$('#bnAddDegree').click(function () {
alert("bnAddDegree Loaded");
});
I have broken my site into different pieces based upon what the user clicks. If they click on a tab in the menu to load a section I call a partial_html page and load the section into the center div. If I put the code above into the main page load it will not fire. If I add an external js file and load it when the page loads it will not fire, I think because the elements are not initialized yet. If I put it into an external js page that is loaded after the partial_html is loaded it will not fire. If I put it ON the partial_html page with a tag it DOES fire. If I put a simple javascript function
function testFile() {
alert("File Loaded");
}
In the places that the jQuery code will not fire it works fine.
Is there something special that I'm missing with jQuery?
When I load the javascrip file I use
$.getScript("js/biosketch.js")
And test it with the simple javascript file and it works fine but not the jQuery call.

You need to use delegated event handlers since you are modifying the DOM dynamically.
$(document).on('click', '#bnAddDegree', function () {
alert("bnAddDegree Loaded");
});

Unable to append HTML to an element in JavaScript or jQuery from inside a function

I am trying to use Barba to implement smooth page transitions. Here is my code to append some HTML when a new page is added.
Barba.Dispatcher.on('newPageReady', function(currentStatus, oldStatus, container) {
console.log("I am In.");
$("#quick-share").append("Share Now!");
});
The appending works from the developer tools console but from inside this function it doesn't. However, the console.log() statement works properly without any issue. I have also tried a pure JavaScript way but it doesn't work inside the Barba function either.
document.getElementById("quick-share").innerHTML = "Share Now!";
Is there something that I am missing?
Thanks.

In fact with Barba.js when you make a transition, the new content will override the old one, that's what we can see in their How it works section:
5- As soon the new page is loaded, barba.js parses the new HTML (taking .barba-container) and puts the new content on the DOM inside #barba-wrapper.
6- The transition instance will take care of hiding the old container and
showing the new one.
7- As soon the transition is finished, the old container is removed from
the DOM.
So your problem is that when calling $("#quick-share"), in the 'newPageReady' event, the old content was removed so it won't return any element with that id, that's why you can't see the text appended.
What you can do is to recreate this element in the new container, in the transitionCompleted event handler.

jQuery : delete a page

I'm using jQuery mobile and my page is generated from an index.php file. When I click on links referring to another option of my php file (index.php?action=other_action) it loads in Ajax so the previous content is still kept in the code. This causes problems as nothing is dynamic anymore, because I'm using specific ids, so it breaks everything. Of course disabling Ajax works but I loose all the beauty of jQuery Mobile.
I guess a solution would be to create an onclick function on the <a>, that will prevent the page from keeping the previous content or delete the old page.
So is there a way to keep using ajax in a way that it doesn't break my dynamic elements ?
You can see it in action here, you can filter names if everything's good. Then click on the top left panel and click something, notice what happens in the inspector...
Thanks for any help.

Hi you have missed enclosing the selector within qoutes...
your jQuery
$(document).ready(function() {
//bind a listener to "click" event on links with class "markviewed"
$('a.ui-btn-present').click(function(event) {
$('ul.listlist').listview('refresh');
$(#pageone).remove(); //<-- selector should be within quotes
// get ids from clicked <a>
var id = $(this).attr('data-id');
$(this).attr({
"class" : "ui-btn ui-btn-icon-notext-ok ui-icon-check ui-btn-a"
});

After much more research I wasn't looking in the right direction: the problem was that the listview had to be refreshed. So I created a new function
<script>
function refreshlist() {
$('.listlist').listview("refresh");
$('#pageone').remove();
};
</script>
And then I added onclick= "refreshlist()"to all my links and now it works.

Alternative to jquery $(document).ready(handler) when using javascript page transitions

In a simple plugin for my wordpress site, I wrote code that sets up click events as follows:
$(document).ready(function() {
$("#myButton").click(function() {
//do stuff
});
});
This code works as expected when I load the relevant page directly. However, the way users are expected to access the page is through a link in the theme header. I am not really sure how page transitions in the theme work, but the end effect is that whenever a link is clicked, some animation happens, the page fades out, and the new page fades in. The problem is that $(document).ready() does not fire when the new page fades in, so the click handlers do not function.
How can I change the code so that the click handlers are registered at the time the new page fades in?
If it's necessary to see how the theme works, I am using the Bridge Theme. A demo version of the theme is available here.
UPDATE:
After playing with the theme page transitions a bit, I am suspecting that the theme is using ajax to get the new page content, fading out old page content, fading in new page content, then "artificially" modifying the url to show the new pages url.

If you bind your click event to the document it will apply to elements which are loaded or created after the document has loaded.
This can be done like so:
$(document).on('click', '#myButton', function() { /* ... */ });

you can use one of these methods:
The DOM way
window.onload = function() { // do stuff with the DOM }
The direct jQuery translation
$(document).ready(function() { // do stuff with the DOM });
The jQuery way
$(function() { // do stuff with the DOM });

How to prevent adding elements to a DOM node?

I have a pretty disgusting issue. "Disgusting" because I do not have full control of the whole webpage and therefore have to hack my way to success.
Situation
I have my own script, which is loaded into the webpage, and a div container, that displays the page´s navigation. I want to add a link to that container and that container should only contain that single link.
Problem
There is a third party script, which also adds links to that container. It does that inside a AJAX callback function
What I have tried
1. Deleting all links but mine after document is completely loaded
This is not possible because third party script loads content via AJAX callback, so when page is fully loaded the unwanted links have not been rendered yet.
2. Renaming div container
After adding my link to the container I stripped the container completely naked, deleting class names, IDs etc. But the third party script still finds that container.
3. Attaching DOMNodeInserted event to the container
Works great in anything that I call a browser. But fails in IE. And the IE is the main browser the user of that page use.
What else can I try?

If the third party script uses jQuery then you can try ajaxComplete().

You can listen to DOMSubtreeModified event, and restore original div state.
var originalChildren = $('#content').children();
var setOriginal = function(e) {
$('#content').off('DOMSubtreeModified');
$('#content').empty().append(originalChildren);
$('#content').on('DOMSubtreeModified', setOriginal);
};
$('#content').on('DOMSubtreeModified', setOriginal);
Test it.

You could override/wrap the DOM methods the other script is using to add elements, such as appendChild(). Something like this (psuedocode)
var originalAppend = document.appendChild;
document.appendChild = function () {
if condition {
originalAppend.apply(document, arguments);
}
}