Question

我无法让jQuery在.load（）函数中工作。

该脚本将指定的页面内容加载到#project div中，然后初始化flexslider，该工作正常。

问题是，我正在尝试添加箭头以导航到下一个/上一个帖子，但当然如果我将.load函数放在下面第一个.load函数之外的箭头，代码将无法正常工作。

我尝试将它们放在下面的.load函数中，并且它在第一篇文章中工作正常。之后，所有jQuery都停止了初始化（flexslider，甚至是左/右箭头单击功能）。

这就像我必须做一个无限的.load（）循环或其他东西。我希望我有意义，希望有人可以提供帮助。这是我的工作，减去箭头。

总结一下这个问题 ..无论如何都要让jQuery在.load（）函数中工作而不在.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;

Answer 1

由于动态加载内容，您可能必须使用带有选择器的on（）方法，即类似于此的内容： $（document）.on（EVENT，SELECTOR，function（）{}）;

Jquery event handler not working on dynamic content

另见http://learn.jquery.com/events/event-delegation/

Answer 2

事件的问题，您可以在加载之前添加事件。

就像：

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

插件调用同样的事情，如果在加载之前无法调用插件构造函数，可能需要调用“destroy”函数并再次构造插件。

请参阅此fiddle例如

jQuery无法在.load（）中工作

2 个答案: