0

This is my code:

<p id = "id_2">click</a>


<div class = "test_1" id = "id_2" style = "display:none;">
    <p>test_div_1</p>
</div>


<div class = "test_2" style="display:none;">
    <p>test_div_2</p>
</div>




<script src="http://code.jquery.com/jquery-1.9.1.js"></script>
<script src="http://code.jquery.com/ui/1.10.2/jquery-ui.js"></script>
<script type="text/javascript">
$(function(){
    $("#id_2").click(function(){
        $(".test_1").show()
        $("body").append("<p id = 'test_p'>test</p>")
    });
    $("#test_p").click(function(){
            $(".test_2").show()
    });
});
</script>

basically what I'm trying to do is: when you click <p id = "id_2">click</a>

it'll show <div class = "test_1"> and append another paragraph which is what I did here:

$("#id_2").click(function(){
    $(".test_1").show()
    $("body").append("<p id = 'test_p'>test</p>")

});

and afterwards when you click on the newly appended paragraph <p id = 'test_p'>test</p> it should show another div which should be:

   $("#test_p").click(function(){
        $(".test_2").show()
});

but it doesn't. how do we get around this? I'm still trying to wrap my head around web development. I do know that the appended it's temporary because a page refresh would erase it unless the appended data was saved on the server. I wonder if that has anything to do with that?.

because facebook's and twitters posting feature is intriguing I know it uses ajax to post the info to the server without a page refresh but how is it able to interact with a div or element that's just been newly appended?

Zion
  • 1,570
  • 6
  • 24
  • 36
  • 2
    Use event delegation. `$('body').on('click', '#test_p', function() { ... })` – Tushar Aug 25 '15 at 03:09
  • how is that different from doing `("#test_p").click(function(){}` I've read in the docs that click calls `on` the way you suggested – Zion Aug 25 '15 at 03:12
  • 1
    Read [event delegation](http://learn.jquery.com/events/event-delegation/) – Tushar Aug 25 '15 at 03:14

0 Answers0