Restart script after load() function

Asked

Viewed 1,260 times

2

I wanted to know how to use my script inside the content that will be loaded by the function load().

The function:

$(document).ready(function() {
    $('.submenu').click(function(event) {
        event.preventDefault();
        $('.page-wrapper').load($(this).data('href'));
    });
});

The elements (sketch):

<section class="page-wrapper">
    <h1> Hello, guys! </h1>
    <p> Este é um exemplo do conteúdo da página </p>

    <ol class="menu">
        <li><a class="submenu" data-href="www.example.com" href="#">Submenu1</a></li>
        <li><a class="submenu" data-href="www.example.com" href="#">Submenu2</a></li>
        <li><a class="submenu" data-href="www.example.com" href="#">Submenu3</a></li>
    </ol>
</section>

That is, the menu will always load via load(). With that mine script does not work on the elements that are incorporated into my "main page". How do I fix this defect?

javascript jquery

  • Phellipe, why not use bind using the function on? It ensures that future elements that will be added to the DOM and that satisfy this selector.

  • I changed the function to $('.submenu').on('click', function(e){...}); and the result has not changed. '-'

  • Is some other fact causing this? Like the Codeigniter Framework template engine for example !?!

  • This Javascript runs on page loading, where after a while this sketch is loaded by Ajax? Tried to specify the selector better (.submenu a) because the selector acts on the <ul> and not about the <a>?

  • I was wrong to do the sketch. The selector is in the right place.

  • The layout is implemented with a template engine. It is divided into Layout.php (footer, header and load content), Content.php (this is the content that is demonstrated in the above outline. It also loads the sidebar) & Sidebar.php (this is the menu that contains the li which I use as a selector.)

Show 1 more comment

2 answers

4


Delegate the treatment of the event to an ancestor who is permanent on the page:

$(document).ready(function() {
    $('.page-wrapper').on('click', '.submenu', function(event) {
        event.preventDefault();
        $('.page-wrapper').load($(this).data('href'));
    });
});
  • 2

    Ah... I was posting an answer with this exact code, very good. Here’s a Jsfiddle I used to test: http://jsfiddle.net/tLez982n/.

  • @Wakim Sorry... :( I knew the answer and decided to post soon...

  • Come on, no problem, I ended up taking too long doing the hehe test.

0

Recently I had the same problem with the company project here which is totally dependent on ajax, only way to solve was to run them again.

Note that before binding the click I thinning, avoiding duplicate clicks.

 function scripts() {
        $('.submenu').unbind('click').click(function(event) {
            event.preventDefault();
            $('.page-wrapper').load($(this).data('href'));
        });
    }

    $(document).ajaxComplete(scripts);

Browser other questions tagged javascript jquery

You are not signed in. Login or sign up in order to post.