0

So im trying do disable links on some <li> ellements that have been loaded in from another page using an .load() function, but for some reason i'm not able to effect those list items. 

var from_post = false; 

$(document).ready(function() {
    //so this is the function that loads in data from another page
    $("#gallery").load('http://localhost/index.php/site/gallerys_avalible/ #gallerys_avalible'), function() {
        console.log('hello');
        // sense there are no other li elliments on the page i thought this
        // would be okay. but this function never gets called, i've moved it
        // all over i just recently attached it to the load function thinking
        // that maybe if the load was not complete it would not run, but i
        // have had no luck.
        $('li').click(function (e) {
            e.preventDefault();
            console.log("I have been clicked!");
            return false;
        });
    };


    $('#addNew').click(function () {
        console.log('i got called');
        $('#new_form').fadeIn(1000); 
    });

    $('form').submit(function() {

        if(from_post) {

           //submit form
            return true; 

        } else {

            //dont submit form. 
            return false; 

        }
    });

any help would be greatly appreciated, oh and the other thing is that i can run this function through firebug, and it works 100% fine. so im stumped.

Improve this question
4
  • What you have looks reasonable enough, but I don't see anything in your code about disabling links. Commented Sep 12, 2011 at 21:06
  • someone just answered my question .live() works. :) but they deleted the answer for some reason. but thanks every one for the help. Commented Sep 12, 2011 at 21:09
  • he's trying to preventDefault on the click event. Commented Sep 12, 2011 at 21:09
  • 1
    Yes, that was my answer that I deleted after taking a second look at your code... Commented Sep 12, 2011 at 21:11

3 Answers 3

Reset to default
4

You are closing your call to .load() too early. You have:

$("#gallery").load('http://...'), function() {

That just calls load and then declares a function. But, that function is not bound to the success handler and it will never be executed. You need the ) to be on the other side of the function declaration so that the function is included as a parameter to your call to load:

$("#gallery").load('http://...', function() {
    ...
});

Fix that and your code works: http://jsfiddle.net/gilly3/WdqDY/

Improve this answer
Sign up to request clarification or add additional context in comments.

4 Comments

Really, this is the answer to the question. While all the other answers do work, the poster's question doesn't require live or delegation. He should be able to directly bind the events within the callback. It's another debate altogether about HOW to bind your events.
Oh, I see so my thinking was correct then initially, you don't need .live? thank you very much for you time. this was very helpful.
@AlexWHB - No. You only need .live() if you will have more list items added to the page later that you want to also have that same click handler.
@Alex this answer is really the right one. I would accept this answer instead of mine.
2

Try a future-proof event observer like live or delegate:

$('li').live('click', function(){})

or, this method is preferred if you know the parent: 

$('#gallery').delegate('li','click',function(){})

The reason for needing this is your click events are being bound to elements that are on the page at the time of the binding. Any li's added later will not see that binding which is how live or delegate works. They bind to the parent and traverse the child nodes every (click in this case) event to see if the event applies to an existing child.

Improve this answer

2 Comments

its nice you find the time to answer, it would be nicer if you would explain why.
thank you so much for your time and willingness to answer my question. I'm still a bit of a noob when it comes to Jquery. :)
1

Use .live('click', ...) or .delegate() instead of .click(...).

Improve this answer

1 Comment

that worked beautifully thank you so much! I have another question if you don't mind, for I am a bit of a noob when it comes to jquery or java script, im more of a php developer. my question is there a way to make a toggle function that first of all toggles only one css style element, such as background-color or something like that. and that selects an id instead of a class, for i know of the toggleClass, but im just wondering if it's possible with ids instead?

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.