jquery hide not working for same div class after ajax call?

Question

1.This is my code here i have a div class inner which is dynamically loaded using ajax call and after ajax call if i click the hide button it is not working.

But its working perfectly before ajax request.

so in order to overcome i just add a outer div and hide that div this time it works.. I don't know why?

$( "#inner" ).replaceWith( data );  /*and*/  $( "#inner" ).hide();   //not working


$( "#inner" ).replaceWith( data );    /*and*/     $( "#outer" ).hide();  //working

Why we cant use the same div class ?

<html>
  <div id="outer">
  <div id="inner">
    <br /> <br /> <br />
  <div>  <input type="button" value="signup"  onclick="changeval();"/>
  </div>
  <br /> <br />  
  </div>
  </div>
  <input type="button" value="hide" onclick="onhide();"/>    
  <script language="javascript"> 
   function changeval(context)
   {          
     var typeval="sdsf";
     var url="sdfsdf";
     $.ajax({
        type:'POST',
        url:'htp://sscs/registration',
        data:'&typeval='+typeval+'&url='+url,
        success:function(data) { 
          $( "#inner" ).replaceWith( data );           
        }        
      });         
    }
    function onhide()
    {
      $( "#inner" ).hide();
    }
  </script>

yes it worked,but i want to know why its not working when we use replace — Lijo
– Lijo, Commented Jan 13, 2014 at 9:59

Satpal · Accepted Answer · 2014-01-13 09:54:03Z

1

Use .html()

 $("#inner").html(data);

instead of .replaceWith() as

Replace each element in the set of matched elements with the provided new content and return the set of elements that was removed.

DEMO of replaceWith, Here you can see div with second class is replace with input content.

answered Jan 13, 2014 at 9:54

Satpal

134k13 gold badges168 silver badges171 bronze badges

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

Comments

Omri Aharon · Accepted Answer · 2014-01-13 09:54:43Z

1

It doesn't work because you replace the <div id="inner">.

Including the div and its ID. <div id="outer"> remains so your other hide works, it still finds that div.

answered Jan 13, 2014 at 9:54

Omri Aharon

17.1k5 gold badges43 silver badges61 bronze badges

Comments

Bhojendra Rauniyar · Accepted Answer · 2014-01-13 09:53:38Z

0

Use like this:

$( "#inner" ).replaceWith( function(){
    return $(this).data();
} );

answered Jan 13, 2014 at 9:53

Bhojendra Rauniyar

86k36 gold badges179 silver badges241 bronze badges

Comments

Santhosh · Accepted Answer · 2014-01-13 09:57:52Z

0

After your ajax call the #inner-div does not exist anymore. You are replacing it with the response from your ajax request .

You could use $("#inner").html(data); to keep the div and then hide it once you received the response.

edited Jan 13, 2014 at 9:57

Santhosh

8,2355 gold badges32 silver badges56 bronze badges

answered Jan 13, 2014 at 9:53

Jens

2,0751 gold badge14 silver badges30 bronze badges

1 Comment

Jens Over a year ago

Wrong context, sorry. Sould be html().

Collectives™ on Stack Overflow

jquery hide not working for same div class after ajax call?

4 Answers 4

Comments

Comments

Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

Comments

Comments

Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related