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

时间：2014-09-30 09:32:01

标签： php jquery html html5

有一个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>

ListerProduitsUserParSecteursAjax.php代码：

<?php
... // getting database data
?>
<p>Total : <?php echo $nr; ?></p>
<div><a href="service.php?action=ServiceAjouterSecteurProduit"><img src="<?php echo HTTP_ICON.'plus.png'; ?>" /></a></div>
<?php echo $paginationDisplay; ?>
<table id="table" class="data display "  >
  <thead style="background-color:#CCC">
    <tr>
      <th><?php echo _getText("service.produit.form.secteur_activite");?></th>
      <th><?php echo _getText("service.produit.form.titre");?></th>
      <th></th>
      <th><?php if($data["secteur"]["cnt"] > 0){ ?><input type="checkbox" id="check_all"><?php }?></th>
    </tr>
  </thead>
  <tbody style="background-color:#FFF">
    <?php

    if($data["secteur"]["cnt"] > 0){
        for($i=0;$i<$data["secteur"]["cnt"];$i++){?>
    <tr class="odd gradeX">
      <td><?php echo $data["secteur"][$i]["secta_lib_fr"]  ?></td>
      <td><?php echo $data["secteur"][$i]["produit_lib"]  ?></td>
      <td align="center" style="vertical-align:middle"><a href="service.php?action=ServiceModifierSecteurProduit&s=<?php echo $data['secteur'][$i]['id_user_secteur']; ?>&p=<?php echo $data['secteur'][$i]['id_user_produit']; ?>"><img src="<?php echo HTTP_ICON.'edit.png'; ?>" alt="<?php echo _getText('main.btn.modifier'); ?>" style="height:10px;width:10px;" /></a></td>
      <td align="center" style="vertical-align:middle"><input type="checkbox" id="prod_<?php echo $i; ?>" value="<?php echo $data['secteur'][$i]['id_user_produit']; ?>"><input type="hidden" id="secteur_<?php echo $i; ?>" value="<?php echo $data['secteur'][$i]['id_user_secteur']; ?>"></td>
    </tr>
    <?php } ?>
    <?php 
    }
     else{
     ?>
    <tr class="odd gradeX">
      <td colspan="4" align="center"><b><?php echo _getText('main.liste.no_data'); ?></b></td>
    </tr>
    <?php }?>
  </tbody>
</table>
<?php if($data["secteur"]["cnt"] > 0){ ?>
<div align="right"><input name="btnSupprimer" id="btnSupprimer" type="button" value="<?php echo _getText("main.btn.delete"); ?>"   class="btn btn-blue"/></div>
<?php } ?>
<?php echo $paginationDisplay; ?>

首次加载页面时，删除按钮正常工作：删除选定的行，并根据新数据库数据重新显示列表。但是稍后当我想删除其他行时，当我选中一些复选框并单击删除按钮时，警报不显示！

那我的方法有什么问题？

4 个答案:

答案 0 :(得分：1)

从我正在阅读的内容来看，您遇到了从数据库添加的行的问题。 可能是什么问题是当你执行这个代码的和平时：

$('#btnSupprimer').click(function() { // btnSupprimer = button generated from an ajax called inside previous function "rechercheSecteursEtProduits"

当你调用$ .click（）函数时，你将一个事件添加到id为＆＃39; btnSupprimer＆＃39;的所有现有DOM对象中，但是如果你添加一个新的，它不会更新DOM对象。所以你应该做的就是每次添加新行时调用此函数。你会得到这样的东西：

   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);
        $('#btnSupprimer').click(addClickHandler()); // this is the div element

    }


function addClickHandler(){
        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 !
            }
        }
    }

我希望它有所帮助

答案 1 :(得分：0)

尝试使用而不是点击下面

$('#btnSupprimer').on("click","#liste_secteurs",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 !
            }
        }
    });

答案 2 :(得分：0)

使用动态jquery选择器而不是常规的“click”事件

$('#liste_secteurs').on('click', '#btnSupprimer', function() {});

// $("container").on("event", "button", function() {});

答案 3 :(得分：0)

从Caveman的回答中我做了一些更新：

function rechercheSecteursEtProduits(pn) {

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

    $('#liste_secteurs').html(html);
    $('#btnSupprimer').on('click',function(){
        if ($(':checkbox[id^="prod_"]:checked').length > 0) {
            if (confirm("Do you want to remove these records ?")) {
                $(':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);
            }
        }
    });

}

它有效！

相关问题
最新问题