We Keep Coding

How to bind an event within dynamically loaded content on a click event?

I have a div inside my html with the id pageContent. When users click various buttons, it will load the appropriate content. When a user clicks the javaQuestions button it loads, javaQuestions.html into the div just fine. However, inside, the javaQuestions.html, I have a collapsible list, and I can't figure out a way to "bind" the li collapse/uncollapse without having the user to click TWICE. Right now what I have is:
$("#pageContent").on('click', 'li', function (){
$('.collapsible').collapsible();
});
So I guess what happens is, first the user clicks on the button, and it loads content. Then, the user clicks on any li, and it enables the "collapsible()" function, but does not uncollapse/collapse the content. Only when the user clicks a second time does it works fine. I tried adding the line $('.collapsible').collapsible(); into the event that loads the javaQuestions.html content, but it doesn't do anything. Kind of at a roadblock, any ideas?
EDIT: Here is the code that loads the content:
$("#pageContent").on('click', '#javaQuestions', function (e) {
fadeIn("#pageContent", "../java-questions/javaQuestions.html", 50);
fadeIn("#commentsContent", "../comments/comment-section.html", 500);
});
I also really want to know how this will function once I figure it out. But as you can see, the above function loads the javaquestions.html, and I can't seem to find a way to ALSO bind 'li' to be collapsible in one swoop.

Have you tried using jQuery bind method? You can bind your handler to, say, body and then you don't have to care about loading and attaching a handler after it.
Update: may be this will help:
$(document).ready(function() {
$("body").on('click', '#pageContent li', function (){
$('.collapsible').collapsible();
});
});

Use this DOCUMENT because it is dynamically loaded
$(document).on("click","li #pageContent",function(){
$('.collapsible').collapsible();
});

Function not responding if the element is not in the page from the start

I have this function:
$(function(){
$(".todo-task").click(function(){
$(".todo-task").css('background-color','green');
});
});
the problem is that "todo-task" is not an element which is present when the page is loaded, but it's appended to the page with another function.
I think that that fact above prevents the function I wrote from taking place, because if I paste the exact same function in the controller when the "todo-task" is present in the page, everything works perfectly.
What should I do?

Use event delegation:
$(function(){
$(document).on("click", ".todo-task", function(){
$(".todo-task").css('background-color','green');
});
});
Note that document can -and should- be replaced by the closest parent that initially exists (for performance - no need to watch the whole document when you know it's going to be in a particular div).

Can't catch jQuery DOM Event that is inside an iframe

I have an <iframe> that contains a particular webpage. In that iframed webpage, the following Event trigger is setup via jQuery:
console.log($('.myElement').trigger('testEvent'));
This event is triggered every ~20 seconds.
Back on the parent page, when the page first loads, I setup an Event Handler for the event:
$('iframe').load(function(){
console.log("Iframe loaded");
$('iframe').contents().find('.myElement').on('testEvent', function(e) {
console.log("Event Fired!", e);
});
});
So once the iframe is loaded, the event handler is setup.
For some reason, the event handler never runs. The event is definitely being triggered because I see the result of the console.log() in the console. I don't see any errors or anything in the console.
Also I can manually trigger it and see that the handler is working:
$('iframe').contents().find('.myElement').trigger('testEvent');
What am I doing wrong here?

I figured it out. So the parent document and the iframe content document each have their own jQuery instance. Apparently it's not (easily?) possible for one instance of jQuery to listen for events triggered by the other instance of jQuery. My problem in the parent document was this:
$('iframe').contents().find('.myElement').on('testEvent', function(e,data) {});
Here I'm trying to use the the parent jQuery to handle the event. This won't work. I have to use vanilla JavaScript:
document.getElementById('#my_iframe').contentWindow.$('.myElement').on('testEvent'), function(e,data) {});
So here I'm using vanilla JavaScript to get to the iframe contents and then the jQuery from that point on is the iframe's jQuery instance, which is the same instance of jQuery that the trigger happens on.
This worked perfectly!

jquery not run parent page's script when it use $.get and append data into it

$.get('page.php', function(data){
$('#container').append(data);
});
$('.delete').click(function(){
alert();
});
I have a page use get to fetch & append more data into the page,
in my main page, i have a button script for class delete, this works for all button in main page, but not the new data append into, is any way to solve this problem?

This is an event delegation issue. The click handler is only set on elements present at the time the code is executed.
Try:
$('body').on('click', '.delete', function(){
alert();
});
body is here just a placeholder for any parent element of .delete. Try to attach the handler to a parent element with as less child elements as possible (in your example #container seems appropriate) to prevent performance issues.

jQuery .load() not working when called from loaded content

My primary navigation [Our Clients, Our Culture, Our People] uses .load() to pull the content and display it in a div on the same page w/o refresh.
I would like for links within the new content to do the same, just display whatever content is being referenced in this same div. However, when they're clicked it goes directly to the new page.
$(function(){
$("a.aboutContent").click(function (e) {
e.preventDefault();
$("#aboutContainer").load($(this).attr("href"));
});
});
So, when Our People is clicked, it pulls ourpeople.htm in to the #aboutContainer div. If you click on a link inside of ourpeople.htm, I'd simply like for that content to display in the same #aboutContainer div. I'm assigning the aboutContent class to links in the subpages as well, but it still isn't working.

You will need to use .live() to listen to clicks from everything, including new DOM elements:
$(function(){
$("a.aboutContent").live('click', function (e) {
e.preventDefault();
$("#aboutContainer").load($(this).attr("href"));
});
});
The reason for doing this is, jQuery code runs when the page is ready - it will attach a click handler to every dom anchor with the class aboutContent - when you load new content, those elements where not there when the page was ready, so never have a click handler attached to them.
Using .live() takes care of that for you. Alternatively, you could place your code in a function, and run that function when the new content is loaded, that way when it runs, it will attach a click handler and the DOM elements will be there, trouble with this is, you would have to mark elements as already having a click handler, or you would end up adding x number of click handlers to some elements.

Probably you can return false from click handler to prevent browser to exeucte HREF on its own.
Like,
$(function(){
$("a.aboutContent").click(function (e) {
e.preventDefault();
$("#aboutContainer").load($(this).attr("href"));
return false;
});
});
Otherwise I would suggest to call some javascript function on href using href="javascript:clickhandler('')"