Demo of non-persistence of events when reappending dom nodes to their original parent

by wheresrhys

HTML

<h1>Demo of non-persistence of events when reappending dom nodes to their original parent</h1>
    <h2>Example of the bug</h2>
<div id="container1">

<p>click me</p>
</div>
    <h2>Similar exmaple where the bug doesn't occur</h2>
<div id="container2">

<p>click me</p>
</div>
<div id="container3"></div>
    <h2>Fix for the bug</h2>
<div id="container4">

<p>click me</p>
</div>

    <h2>Final example of the non bug using append()</h2>
<div id="container5">

<p>click me</p>
</div>

JavaScript

var ps1 = $("#container1 p").click(function() {
    $("#container1").html(ps1);
    console.log("hi");
});


var ps2 = $("#container2 p").click(function() {
    $("#container3").html(ps2);
    console.log("hi");
});

var ps4 = $("#container4 p").click(function() {
    ps4.detach(); // This line fixes the bug
    $("#container4").html(ps4);
    console.log("hi");
});

var ps5 = $("#container5 p").click(function() {
    $("#container5").append(ps5);
    console.log("hi");
});