Buenas,
resulta que los eventos "click" escuchan tanto en el selector que estoy marcando con $(document)
como en los que están por arriba, aunque no sean sus hijos y no se llamen igual.
Para verlo, os pongo el código de las tres páginas:
tengo 3 páginas:
index.php
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js">
</script>
<div><?php include "page1.php"; ?></div>
<div><?php include "page2.php"; ?></div>
page1.php
<button id="add">Add</button>
<script>
$(function () {
var i = 0;
$(document).on('click', i, '#add', function( ){
//alert ("page1");
i+=1;
alert (i);
var the_html = '<button class="my_class">Alert</button>';
$("#my_table").append(the_html);
});
});
</script>
page2.php
<div id="my_table">
</div>
<button id="clean">Clean</button>
<script>
$(function () {
$(document).on('click', '.my_class', function(){
alert ("page2");
});
$(document).on('click', '#clean', function(){
$(".my_class").off();
$("#my_table").html("");
});
});
</script>
this
, para que afecte unicamente al elemento que le das click y no al resto