live click showing another div

Question

I have two div's that are being placed in the DOM after the page loads, with jquery. I'm having a hard time binding one div action to showing another element. Any pointers?

  jQuery('#create-account-btn').live('click',function(){
    jQuery('#create-account').show();
    jQuery(this).hide();
  });

Create-account will now show

Answer 1

Working Demo http://jsfiddle.net/Zvd8J/

Jquery .on event read more here but only above v 1.7 : http://api.jquery.com/on/ .live here: http://api.jquery.com/live/

if you keen: What's the difference between jQuery .live() and .on()

Further if you become more keen: see here why : What's wrong with the jQuery live method?

Took liberty to jot down small html and demo for you.

Hope this helps, :)

Also note: you could do this:

$(document).on('click','#create-account-btn',function(){

});

code

$('.hulk').hide();
$('#create-account-btn').on('click',function(){
    $('.hulk').hide();
    $('#create-account').show();

  });

$('#foo').on('click',function(){
    $('.hulk').hide();
    $('#create-whatever').show();

  });

html

<div class="hulk" id="create-whatever">
hulk yada yada
</div>
  <div class="hulk" id="create-account">
ironman yada yada crea accoutn show
</div>
<input type="button" id="create-account-btn" value="click me" />

<input type="button" id="foo" value="click me to show another" />