重置div的内容两次后jQuery代码不起作用

There is a div element :

有一个div元素:

...
<div id="liste_secteurs"></div>
...
<script type="text/javascript">
$(document).ready(function() {
     rechercheSecteursEtProduits(0); // setting the div's content 
     $('#btnSupprimer').click(function() { // btnSupprimer = button generated from an ajax called inside previous function "rechercheSecteursEtProduits"
        if ($(':checkbox[id^="prod_"]:checked').length > 0) {
            var msg = "Do you want to remove these records ?";
            if (confirm(msg)) {
                $(':checkbox[id^="prod_"]:checked').each(function(){
                    var type = "",id="";
                    if($(this).val() == "") {   //  delete secteur
                        type = "secteur";
                        var tabIdx = $(this).attr("id").substr(5);
                        id = $("#secteur_"+tabIdx).val();
                    } else {                    //  delete produit
                        type = "produit";
                        id = $(this).val();
                    }
                    $.ajax({
                        data: "type="+type+"&id="+id,
                        type: "POST",
                        url:  "<?php echo HTTP_AJAX ?>service/SupprimerSecteursProduitsUserAjax.php", // deleting database row
                        async: false
                    });
                });
                rechercheSecteursEtProduits(0); // this causes the bug : the "delete" button does not work anymore after this code is called !
            }
        }
    });
});

function rechercheSecteursEtProduits(pn){

    var user = "<?php echo $_SESSION[CODE_USER]; ?>";
    var html = $.ajax({
        data: "id_user="+user,
        type: "POST",
        url:  "<?php echo HTTP_AJAX ?>service/ListerProduitsUserParSecteursAjax.php?pn=" + pn,
        async: false
    }).responseText;

    $('#liste_secteurs').html(html); // this is the div element

}

</script>
...
<div