jquery/ajax - .load keeping the same JQuery

Question

Basically,

What I'm trying to do is have a button which when you click, loads up another .html form which has a button to the next .html page and so on and so on..

The first part works, and, for the form to be loaded, however, when the next form is loaded the jquery does not work for the button.. For example:

index1.html:

<button id="LoadForm" value="form1.html">Load the form</button>

$(document).ready(function() {
    function foo(x) {
        $('.content').load(x);
    }

    $('#LoadForm').click(function() {
        var ele = $(this).attr("value");
        $(this).hide();
        form(ele);
    });
});

In form1.html:

<button id="LoadForm" value="index.html">Go to form2..</button>

Where am I going wrong here?

@Rory McCrossan: It appears they have multiple issues (at least 3), so marking as duplicate for the delegation alone may not be appropriate. We need to see the full pages. Thanks :) — iCollect.it Ltd, Aug 08 '14 at 10:08
If you're referring to duplicate ids, I don't believe that's an issue as the button is being replaced on each `load`. — Rory McCrossan, Aug 08 '14 at 10:09
@Rory McCrossan: That one is an assumption (I also made, they are however also *hiding* the original button???), also they misnamed the function (typo?), however the standard delegation fix apparently does not work for them. Need to see the full pages. — iCollect.it Ltd, Aug 08 '14 at 10:11
Okay. Question reopened. Please provide the full page examples so we can spot additional issues :) — iCollect.it Ltd, Aug 08 '14 at 10:14

iCollect.it Ltd · Accepted Answer · 2014-08-08T10:04:36.930

1) You can't have duplicate ids on the same page, so .content must contain the original #LoadForm button (I assume it does) and

2) you need to use a delegated event handler for dynamically added elements:

$(document).ready(function() {
    function foo(x) {
        $('.content').load(x);
    }

    $(document).on('click', '#LoadForm', function() {
        var ele = $(this).attr("value");
        $(this).hide();
        form(ele);   // This should be foo in your example :)
    });
});

This works by listening for click events bubbling up to a non-changing ancestor (document is the best default of there is nothing closer. Never use 'body' as it has problems related to styling). It then applies the jQuery filter. It then applies the supplied function for any selected elements that generated the event.

and 3) you have foo and form in your example. Please correct the code :)

This still does not work. It loads the first form, but in the second page nothing is fired.. — Phorce, Aug 08 '14 at 10:02
It should work (used this code 100s of time), but you do not show your whole page so may have other issues. Can you show the entire page(s)? — iCollect.it Ltd, Aug 08 '14 at 10:03

jquery/ajax - .load keeping the same JQuery

1 Answers1