jQuery not working in .load()

Question

I'm having trouble getting jQuery to work in the .load() function.

The script loads the specified pages content into the #project div, and then initializes flexslider, which is working fine.

The problem is, I'm trying to add arrows to navigate to next/previous post, but of course if I put the .load function for the arrows outside of the first .load function below, the code won't work.

I tried putting them within the .load function below as well, and it worked fine for the first post. After that, all the jQuery stopped initializing (flexslider, and even the left/right arrow click function).

It's like I would have to do an unlimited .load() loop or something. I hope I'm making sense and hopefully somebody can help. Here's what I have that works, minus the arrows.

To sum up the question.. is there anyway to get jQuery to work in the .load() function without re-initializing it inside the .load()?

jQuery('.single-item, .portfolio-images article').click(function() {
    var geturl = window.location;
    var next_project = jQuery(this).attr('data-projectid');
    jQuery('html, body').animate({ scrollTop: 0 }, 500);
    jQuery('#project').slideUp('slow');
    jQuery('#project').load(geturl + "?page_id=" + next_project + " .project", function() { 
        if (jQuery(this).hasClass('opened')) {
            jQuery(this).slideDown(600);
            jQuery('.flexslider').fadeIn();
        } else {
            jQuery(this).slideDown(300);
            jQuery('.flexslider').fadeIn();
        }
        jQuery('.grid').click(function() {
            jQuery('#project').slideUp(500);
        });
        // Initialize Scripts
        jQuery('.flexslider').flexslider({
            animation: "slide",
            smoothHeight: true,
            startAt: 0,
        });
    });
    }).addClass('opened');
    return false;

`geturl + "?page_id=" + next_project + " .project"` I think this is incorrect. Why are you adding ` .project`? This is supposed to be a URI. — Alejandro Iván, Sep 26 '13 at 02:52
Are you telling that this code is not responding, if yes then make sure you put the code inside `$(function(){ //... });` — The Alpha, Sep 26 '13 at 02:53
No guys, this is the working code i have now. You can see it in the works here: http://www.cadengrant.com/clear/ . When you click on an image, it loads in the content just fine, but the arrows don't work. And @AlejandroIvan, the .project is the class I'm loading into the #project div. — Caden Grant, Sep 26 '13 at 02:54
@CadenGrant have you tried using `var $this = jQuery(this);` before the `.load()` method and, inside of it, using `if ($this.hasClass...)`? I think it's a scope problem. — Alejandro Iván, Sep 26 '13 at 03:27

score 0 · Accepted Answer · edited May 23 '17 at 11:56

0

Since the content is being loaded dynamically, you may have to use the the on() method with a selector, ie something similar to this: $( document ).on(EVENT, SELECTOR ,function(){});

Jquery event handler not working on dynamic content

also see http://learn.jquery.com/events/event-delegation/

edited May 23 '17 at 11:56

Community

1
1

answered Sep 26 '13 at 03:36

lee

16

score 0 · Answer 2 · answered Sep 26 '13 at 04:49

The problem with events, you can add events before your load.

Just like:

$(document)
    .on("click", ".your-elements", function ()
    {
        alert("code here");
    });

The same thing to plugins calls, if you cannot call the plugin constructor before your load, maybe you need call a "destroy" function and construct plugin again.

See this fiddle for example

jQuery not working in .load()

2 Answers2