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('')"
Related
I am trying to add a click event to one of the element which is nested inside of a iframe of iframe.
this is a iframe .ssueContentIframe under this, there is another iframe added as #SmartReportTabContent1 so inside of the second iframe element, I am trying to add a click event like this:
Basically, I don't know when both of iframe will be loaded and all elements will available, for future I am adding:
$('.ssueContentIframe').contents().find( '#SmartReportTabContent1' ).find('.ui-grid-selection-row-header-buttons.ui-grid-icon-ok.ui-grid-row-selected').on('click', function(){
alert('Hi');
});
But not working. what is the correct way to wait until both of iframe exist and add the click event to one of the element here?
Thanks in advance!
You need to use "contents" on the second iframe as well. to wait for it to load, you can use the "ready" event on the second iframe.
eg:
$("#SmartReportTabContent1").find("iframe").ready(function (){
// do something once the iframe is loaded
});
Update
refer to this question
Well I edit this, first do a load of the first iframe and check it loaded well, then do the function on click on the element.
$(function(){
$('#foo1').load(function(){
alert("Loaded");
$('#foo1').contents().find('iframe').contents().find('#test').on('click', function(event) {
alert("Working");
});
});
});
I tested it on my computer and worked perfectly, remember addind the library, if you don't add a library it won't work.
Just change the ID i used to your IDs.
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();
});
$.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.
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/
I am adding images to my page dynamically with jquery. Basically I am creating "pixel-y / lo-res" versions of the images on the page, and adding the at page load overtop of the originals. Then a typical "fade-out on hover" thing should fade them out on mouseover, showing the orignals.. as if "up - rezing" .. if that makes sense.
So I've got the images coming in.. but somehow the hover listener isn't attaching. At first I tried hover, now I'm on click just because it is easier to troubleshoot. Nothing.
The .on() function should attach itself even to dynamically added items, right? What is going wrong? I'm not getting any errors. It's just not working.
$.ajax({
type:"POST",
url:"js/pixelsandwich/pixelsandwich.php",
data:{src:src},
success:function(response){ // if there is already a "lo-rez" image, I get that URL.. if there isn't, one is created and I return that URL
newImg = $("<img class='crunched'>"); // create the new <img>
newImg.attr('src', response); // assign the source
frame = $that.parent(); // grab the containing frame
frame.append(newImg); // add the new image. css:position:absolute and z-index take care of the rest
}
});
$(".crunched").on("click", function(){ // << this just isn't attaching at all
alert("hello");
$(this).fadeTo('slow',0.5);
});
Cn anyone help?
The .on() function should attach itself even to dynamically added
items, right?
Nope, with dynamically created elements you have to bind using .on() to an element that already exists when the code is run. Worst case is usually the body element, but the closer an element you can pick in the DOM the better.
Assuming that .crunched is the class of your dynamically added elements, try:
$("body").on("click", ".crunched", function(){ // << this just isn't attaching at all
alert("hello");
$(this).fadeTo('slow',0.5);
});
Per the jQuery docs:
Event handlers are bound only to the currently selected elements; they
must exist on the page at the time your code makes the call to .on().
To ensure the elements are present and can be selected, perform event
binding inside a document ready handler for elements that are in the
HTML markup on the page. If new HTML is being injected into the page,
select the elements and attach event handlers after the new HTML is
placed into the page.
The on method should be used to delegate event handling to an extant ancestor of the dynamically added elements. For example:
$(document).on("click", ".crunched", function(){ // << this just isn't attaching at all
alert("hello");
$(this).fadeTo('slow',0.5);
});
The collection $(".crunched") is empty when you run your code, so the event handler isn't being attached to anything.