jQuery loading content in div onClick

Question

I have pages in my 'inc' folder, when I hit the 'trigger', #wrapper will load the selected page into the #wrapper. The problem I have is;

Whenever I click on 'trigger' outside of the #wrapper it works. And the content will load into the #wrapper. But when I have the 'trigger' inside of the #wrapper it won't work.

I'm stuck on this for a while.

The JS code:

$(document).ready(function() {

    // Initial
    $('#wrapper').load('inc/home.php');
});

$(document).ready(function() {

    // Set trigger and container variables
    var trigger = $('#test a'),
        container = $('#wrapper');

    // Fire on click
    trigger.click(function() {
        var target = $(this).attr('href'); 

        // Begin fade
        setTimeout(function(){ $('#wrapper').css("opacity", "0"); }, 0);

        // Load target page into container
        setTimeout(function(){ container.load('inc/' + target + '.php'); }, 400);

        // End fade
        setTimeout(function(){ $('#wrapper').css("opacity", "1"); }, 900);

        // Stop normal link behavior
        return false;
    });
});

If you mean that your trigger element is inside the #wrapper div and the html that is loaded, then you are destroying and creating a new element each time you do a `.load()` call. Event listeners are not persistent across new instances of elements. Possible duplicate of [Event binding on dynamically created elements](/questions/203198/event-binding-on-dynamically-created-elements) — Patrick Evans, Oct 01 '18 at 12:51

Nikhil Aggarwal · Accepted Answer · 2018-10-01T12:56:36.457

2

It is because the element was not available, hence, the event was never binded. You can try following using jQuery.load callback.

$(document).ready(function() {
  var container = $('#wrapper');
  container .load('inc/home.php', function() {
    var trigger = $('#test a');

    trigger.click(function() {
      // your code here
    });
  });
});

Alternatively, you can use jQuery.on for dynamic elements

Update from

trigger.click(function() {

to

container.on("click", "#test a", function() {

edited Oct 01 '18 at 12:56

answered Oct 01 '18 at 12:51

Nikhil Aggarwal

28,197
4
43
59

This fixed the problem, but only for the first click inside the #wrapper works – manny Oct 01 '18 at 13:34
Not clear with statement - `Only for the first click`. Can you please explain. – Nikhil Aggarwal Oct 01 '18 at 13:39
When I onClick on 'trigger' outside of the #wrapper it works fine, when I click on 'trigger' inside of the wrapper, only the first click will work and will load new content into the #wrapper. But the next clicks won't work, when the content of #wrapper is replaced, it won't work anymore. – manny Oct 01 '18 at 13:46
I used your code except `container.on("click", "#test a", function() {` and I added `return false;` . [I do not often post on SO so I don't know how to paste my updated code. I'm sorry if I'm not clear enough] – manny Oct 01 '18 at 13:52
1

So if you are updating the html then second solution would have worked for you. Correct? – Nikhil Aggarwal Oct 01 '18 at 14:25
1

You are right, I added your second solution and it worked, I'm very thankful. – manny Oct 01 '18 at 15:33
1

glad to help you :) – Nikhil Aggarwal Oct 01 '18 at 21:11

score 0 · Answer 2 · answered Oct 01 '18 at 12:54

0

Maybe you should post your DOM/Html file also... Probably its a problem with the selection of the trigger. Try to select it with a class:

<a class="trigger-button">Click Me</a>


var trigger = $('.trigger-button')

answered Oct 01 '18 at 12:54

jensteichert

126
6

jQuery loading content in div onClick

2 Answers2