Refresh DOM Jquery

Question

I have two input buttons on my document which are contained in a main div 'container'.

The code i've used for them is:

<input id="anotherservices" type="button" value="Add Another Service">
<input id="addmultiterms" type="button" value="Go">

Now when i click on the first button, i.e. the button with the value "Add Another Service", i need that both the above buttons fade out, and then an ajax request is performed. Then both the buttons get appended to the main 'container' div again.

And this is recursive which means that when i again click on the first button which has been newly appended, again both the newly appended buttons should fade out and another set has to be apppended to the document.

The code ive used for accomplishing this is follows:

$('#anotherservices').live("click",function(e)
{ 
$(this).fadeOut();
$('#addmultiterms').fadeOut();

/* ajax request goes here */ 

$('#container').append('<input id="anotherservices" type="button" value="Add Another Service">');

$('#container').append('<input id="addmultiterms" type="button"  value="Go">');

But the second button, with the value "Go" isnt fading out because it is not being added to the dom at runtime.

How do i accomplish this?

fadeOut() doesn't remove elements, it just hides them, so you're creating multiple elements with the same id. Why don't you use .append() to move the existing buttons to the end of the container and then use fadeIn() to show them again? — nnnnnn
– nnnnnn, Commented Jan 11, 2013 at 4:57
changed fadeOut to Remove. And now it works. Thanks so much :) — Kanishk Dudeja
– Kanishk Dudeja, Commented Jan 11, 2013 at 5:04

Prashant Kumar · Accepted Answer · 2013-07-24 23:45:13Z

1

fadeOut() does not remove elements as nnnnnn said in the comment. You can use fadeIn() method to display buttons again. And can change the value of a button using

$("#addmultiterms").attr('value', 'Go');

The second option is removed buttons before adding new buttons you can use the following code to remove the button.

$("#addmultiterms").remove();

edited Jul 24, 2013 at 23:45

Prashant Kumar

23.2k14 gold badges51 silver badges64 bronze badges

answered Jan 11, 2013 at 5:05

Siddiqui

7,90817 gold badges84 silver badges132 bronze badges

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

Comments

Raghurocks · Accepted Answer · 2013-01-11 05:13:32Z

0

If you are adding the elements dynamically , You have to use the

$(document).ready(function (){
     -- Your Function goes here
})

why because for the first time when appending the fadeOut and something else, it has to be created first, then you can follow other logics like, removing or something like that.. By the way you have to use 'remove' obviously....

Hope this helps......

answered Jan 11, 2013 at 5:13

Raghurocks

9258 silver badges20 bronze badges

Collectives™ on Stack Overflow

Refresh DOM Jquery

2 Answers 2

Comments

Comments

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Related