重置div的內容兩次后jQuery代碼不起作用

[英]jQuery code does not work after resetting a div's content twice


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>

Code of ListerProduitsUserParSecteursAjax.php :

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; ?>

When the page loads for the first time then the delete button works fine : the selected rows are deleted , and the list reappears accordingly to new database data. But later when I want to delete other rows then the alert does not show when I check some checkboxes and clicking the delete button !

當頁面第一次加載時,刪除按鈕正常工作:刪除選定的行,並相應地重新顯示列表到新的數據庫數據。但是稍后當我想刪除其他行時,當我檢查一些復選框並單擊刪除按鈕時,警報不顯示!

So what is wrong in my approach ?

那我的做法有什么問題?

4 个解决方案

#1


1  

From what I am reading you are having problems with the row that are added from the database. What could be the problem is when you execute this peace of code:

從我正在閱讀的內容來看,您遇到了從數據庫添加的行的問題。可能是什么問題是當你執行這段代碼時:

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

When you call the $.click() function you add a event to all the existing DOM object that have a id of 'btnSupprimer', however this doesn't update if you add a new DOM object. So what you should do is call this function every time you add a new row. you would get something like this:

當您調用$ .click()函數時,您將向所有現有DOM對象添加一個id為'btnSupprimer'的事件,但是如果添加新的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 !
            }
        }
    }

I hope it helps

我希望它有所幫助

#2


0  

Try using on instead of click as below

嘗試使用而不是點擊如下

$('#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 !
            }
        }
    });

#3


0  

Use the dynamic jquery selector instead of the regular 'click' event

使用動態jquery選擇器而不是常規的“click”事件

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

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

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

// $(“container”)。on(“event”,“button”,function(){});

#4


0  

As from Caveman's answer I made some updates :

從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);
            }
        }
    });

}

And it works !

它的工作原理!


注意!

本站翻译的文章,版权归属于本站,未经许可禁止转摘,转摘请注明本文地址:https://www.itdaan.com/blog/2014/09/30/729d7b052d0f1ae54018fe95a769eea5.html



 
粤ICP备14056181号  © 2014-2020 ITdaan.com