Problem with jquery

Fuhrmann

Well-known member
So, i am loading a page with ajax.

I am at page one with 3 elements. All the elements have the class "PublicLink", so when i click in the "PublicLink" it is called a jquery function that i made.
Element 1
Element 2
Element 3

When i click on the link to go to the next page, i will have two more elements all with the same class.

But then, when i try to click inthe "PublicLink" of the new objects added to the dom, nothing works.

I now there is the "live()" function in jquery, i though that it is exactly what i am looking for, but, does not work!

Code:
XenForo.PublicLink = function($link)
{
    $link.live('click', function(e)
    {
        //do stuff
    });
}

Any help to make this work?
 
So, i am loading a page with ajax.

I am at page one with 3 elements. All the elements have the class "PublicLink", so when i click in the "PublicLink" it is called a jquery function that i made.
Element 1
Element 2
Element 3

When i click on the link to go to the next page, i will have two more elements all with the same class.

But then, when i try to click inthe "PublicLink" of the new objects added to the dom, nothing works.

I now there is the "live()" function in jquery, i though that it is exactly what i am looking for, but, does not work!

Code:
XenForo.PublicLink = function($link)
{
    $link.live('click', function(e)
    {
        //do stuff
    });
}

Any help to make this work?

Shouldn't the first line
Code:
XenForo.PublicLink = function($link)
be
Code:
XenForo.ContentLoader = function($link)
?
 
Yes, i make it too:

XenForo.Register('a.PublicLink', 'XenForo.PublicLink');

I just put here one part of the code...

My problem is the new elements to the page and the jquery that does not work on them..
 
Shouldn't
XenForo.Register(
be
XenForo.register(

Note the small 'r'
 
This is what i got, its working for all elements in the page:

XenForo.register('a.PublicLink', 'XenForo.BookmarkLink');
XenForo.register('a.ShowOlder', 'XenForo.ShowOlder');
XenForo.register('a.ShareLink', 'XenForo.ShareLink');

The problem still is with the PublicLink, that add new elements to the page, with the same class "PublicLink", but then, jquery doest not work with the news elements.
 
This is my code:
Code:
XenForo.TagLink = function($link)
    {
        $link.click(function(e)
        {
            e.preventDefault();
            var $link = $(this);

            XenForo.ajax(this.href, {}, function(ajaxData, textStatus)
            {
                if (XenForo.hasResponseError(ajaxData))
                {
                    return false;
                }
                $link.stop(true, true);

                new XenForo.ExtLoader(ajaxData, function()
                {

                    var $container = $($link.data('container'));
                    $container.empty().append(ajaxData.templateHtml);

                });
            });
        });
    };
 
Well, i found a way that make my new elements in DOM work with the jquery function that i made..but, its ugly, i know, but is the only wat i get it to work:

Just added a XenForo.init(); in my function that add new elements to the DOM.
 
Another workarround that i think could work:

PHP:
public function renderJson()
    {
        $this->_templateName = 'bookmark_posts_each';
        $output = $this->_renderer->getDefaultOutputArray(get_class($this), $this->_params, $this->_templateName);
        $output['js'] = array('js/BookmarkPosts/frontend.js');
        return XenForo_ViewRenderer_Json::jsonEncodeForOutput($output);
}

So, when i click the link to add new elements to the page, a the page load again the "frontend.js".

But, its fail for me. Doest not work in the new elements. Still looking...:D
 
Omg! Cant believe i got it!

I change all my jquery and now i got this:

PHP:
XenForo.BookmarkPosts = function($form) { this.__construct($form); };
    XenForo.BookmarkPosts.prototype =
    {
        __construct: function($form)
        {
            this.$form = $form;

            $('a.BookmarkLink').live('click', $.context(this, 'unbookmark'));

            $('a.TagLink').live('click', $.context(this, 'showAllBookmarksWithTags'));
        },

        unbookmark: function(e)
        {
            e.preventDefault();

            XenForo.ajax(e.target, {}, function(ajaxData, textStatus)
            {
                if (XenForo.hasResponseError(ajaxData))
                {
                    return false;
                }
                $('li[id~="bookmark-'+ajaxData.deletedId+'"]').xfRemove('xfSlideUp');

            });
        },
        showAllBookmarksWithTags: function(e)
        {
            e.preventDefault();

            XenForo.ajax(e.target, {}, function(ajaxData, textStatus)
            {
                if (XenForo.hasResponseError(ajaxData))
                {
                    return false;
                }
                var $tagLink = $('a.TagLink');
                var $container = $($tagLink.data('container'));
                $container.empty().append(ajaxData.templateHtml);
            });
        }
    };

Now, the when i click in some element that was added to the dom, which i require a jquery action, works! Thanks to all that tried to help me!
 
Top Bottom