How to delete and reload jQuery / javascript functions after ajax call

Question

Let's say I have this code:

<div id="content">
</div>

and I use a simple ajax request to fill the content with data which work when I click some button

    $.get("page?num=" + pageNumber, function(data){
                $("div#content").html(data);
});

one time the data will be

<div id="Data1">
</div>

and other time it will be

<div id="Data2">
</div>

for each id I have differnet jquery functions. for exampe:

$('#Data1').click(function(){});

some of the functions are similar and some are different.

My question - if I click the button I load all the scripts I need. when I click the other button I need to load the scripts again for the new content, but what happens to the old functions that was relevant to the previous content? Each time I click I load new scripts without deleting the last ones.

How do I delete/manage my scripts correctly?

thanks, Alon

Can you tell us where you're calling: $('#Data1').click(function(){}); and presumably, $('#Data2').click(function(){}); — c4urself
– c4urself, Commented Dec 15, 2011 at 7:49
when I think of it - all of my scripts are the same for each load. I was wondering how I solve it in my case, and how I will solve it if I would have different scripts... — Alon
– Alon, Commented Dec 15, 2011 at 8:41

dku.rajkumar · Accepted Answer · 2011-12-15 08:42:04Z

1

I am not sure if i understood your question. are you expecting something like

$("div#content").html(""); // deleting existing data
$("div#content").html(new_data); //loading new data

edited Dec 15, 2011 at 8:42

answered Dec 15, 2011 at 7:51

dku.rajkumar

18.6k8 gold badges43 silver badges58 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Alon Over a year ago

no - I am expecting $("div#content").html(somedata); or $("div#content").html(someOtherdata);

dku.rajkumar Over a year ago

yeah.. then the above will work. the 1st line will remove all the existing data. second line will load new data

Tony Bogdanov · Accepted Answer · 2011-12-15 07:52:55Z

1

jQuery binds events to DOM objects (divs) in this case when they are called. Which means it looks for an element with the given ID and then binds it. Since Edit1 and Edit2 does not exists when the script is run, they are not bound.

You can try to bind them each time you change their ID.

function rebind() {
    $('#content').click(function(){});
    $('#Data1').click(function(){});
    $('#Data2').click(function(){});
}

Call this whenever you load new content in the div.

answered Dec 15, 2011 at 7:52

Tony Bogdanov

7,72610 gold badges53 silver badges82 bronze badges

3 Comments

Alon Over a year ago

I can't use live because I am bound to jQuery 1.4.3. Anyway, what is the difference between using rebind() and not using it - either way if it doesn't find the element it doesn't attach the function.and what is the difference between bind() and rebind()?

Bhesh Gurung Over a year ago

@Alon: You didn't check the docs right? It says it's been there since version 1.3. I think if you are using version 1.4.3, you should be good with it.

Alon Over a year ago

I misunderstood what they meant there - thanks for the notice!

José · Accepted Answer · 2011-12-15 08:32:50Z

1

Gurung is right about the event handler, but as of jQuery 1.7, the .live() method is deprecated. Use .on() to attach event handlers instead.

(I could not post this information as a comment, so it had to be a new answer, sorry aboyt that).

answered Dec 15, 2011 at 8:32

José

3913 silver badges14 bronze badges

Comments

Bhesh Gurung · Accepted Answer · 2011-12-15 07:50:30Z

0

May should just use the .live() function.

Description: Attach an event handler for all elements which match the current selector, now and in the future.

answered Dec 15, 2011 at 7:50

Bhesh Gurung

51.1k23 gold badges96 silver badges147 bronze badges

Collectives™ on Stack Overflow

How to delete and reload jQuery / javascript functions after ajax call

4 Answers 4

2 Comments

3 Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

2 Comments

3 Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related