CODEWITHSUNDEEP
javascriptjqueryhtmlajax
Phorce
Phorce

Reputation: 4652

jquery/ajax - .load keeping the same JQuery

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?

Upvotes: 0

Views: 36

Answers (1)

iCollect.it Ltd
iCollect.it Ltd

Reputation: 93611

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 :)

Upvotes: 1

Related Questions