We Keep Coding

In virtual table click function is not working

click function is not working. I don,t know the reason
$("img[id^='down']").click(function(){
alert("hi");
});
after collect some data, a table is display in browser with down image. i need click function for that image but its not working
please help me where iam wrong

Because your target element doesn't exist on page load and it loaded using ajax, the
$("img[id^='down']").click(...
doesn't work. You should use event delegation. So your code should changed to
$(document).on('click', "img[id^='down']", function(){
alert("hi");
})

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();
});

Add a resize event handler only once

I have a widget that insert a div element in the DOM;
that div needs some js that handles the resize event;
the problem is:
the widget can be added multiple times on the same page, but I don't wanto to add many identical resize event handlers on the page (one, acting on the specific widget's class will be enough for all the widget instances);
the page that will embeed the widget can have its own resize event handler, that should not be deleted;
do you have any suggestion about how to implement this?

Honestly, I didn't get most of workflow explained as you didn't provide any html and js but I hope the following works for you:
var resized = 0; // works as a flag
$( window ).on('resize', function () {
if ( resized++ >= 1 ) return;
// do something here..
console.log('resized once'); // console.log as an example!
});
Good luck.

How to attach events to a colorbox popup in backbone?

I'm having a lot of issues with events triggering in my colorbox popup. Currently, there is a backbone view taking care of a user profile page. There is a gallery of photos, that when clicked, opens a colorbox that contains the photo, as well as comments, comment input form, and like buttons.
The html I put into the colorbox is a hidden div on the template itself. Everything displays just fine, but clicking things don't trigger anything. I figured I would try to attach the event handlers to the html I pass into the colorbox function, since I'm guessing the pop up colorbox is not considered to be in the backbone view's dom. The function is below, which the Backbone view triggers of a click event on an img. The var photoBox is the html I want to be displayed in the colorbox. I tried to attach event handlers to the photoBox, but to no avail.
popColorbox: function(event) {
var photoID = $(event.currentTarget).parent().attr('data-id');
var photoBox = $("#inline_example" + photoID).parent().html();
$(photoBox).on('click', '.unlike', function(){
console.log("hello");
alert("hello");
});
$(photoBox).on('click', '.like', function(){
console.log("hello");
alert("hello");
});
$.colorbox({html: photoBox});
}

Your first assumption as to why the events aren't being triggered is correct. In backbone view's the events are delegated to their root el, as such since the colorBox's elements are not children of the view's el its events aren't being triggered.
The reason why your events aren't being fired when you try binding directly to the photoBox I think is because the colorBox plug-In expects a string of html which it uses to build up it's html (as opposed to just attaching the nodes you pass in).
In order to trigger your events you will need to bind them to some existing higher element on the DOM, in this case you might need to go up to the document.
$(document).on('click', '.unlike', function(){
console.log("hello");
alert("hello");
});
$(document).on('click', '.like', function(){
console.log("hello");
alert("hello");
});

Maybe here the event listener is added on html rather than a selector. Please look at jQuery documentation on adding an event listener. http://api.jquery.com/on/

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('')"