阿贾克斯不止一次打电话

Ajax called more than once

本文关键字：打电话 不止一次 阿贾克斯      更新时间：2023-09-26

我的ajax代码有一个问题。它被调用不止一次。我的php代码是下一个：

（while循环，我从数据库中获取所有结果。我只粘贴了一个模式和一个下拉菜单，因为其他一切正常）

$rezPet = mysqli_query($kon, "SELECT * FROM pets WHERE user_id = ". $userId ." ORDER BY id DESC");
while($redPet = mysqli_fetch_assoc($rezPet)){

......
<div id='"confirmBox-". $redPet["id"] ."'" class='"modal fade bs-example-modal-xs'" tabindex='"-1'" role='"dialog'" aria-labelledby='"mySmallModalLabel'">
    <div class='"modal-dialog modal-sm'">
      <div class='"modal-content'">
            <div class='"modal-header'">
                <button type='"button'" class='"close'" data-dismiss='"modal'" aria-label='"Close'"><span aria-hidden='"true'">&times;</span></button>
                <h4 class='"modal-title'" id='"myModalLabel'"><b>". $redPet["name"] ."</b> is gevonden?</h4>
            </div>
            <div class='"modal-body'">
                Bent u zeker dat <b>". $redPet["name"] ."</b> gevonden is?
            </div>
            <div class='"modal-footer'">
                <button id='"btnFoundCancel-". $redPet["id"] ."'" type='"button'" class='"btn btn-default'" data-dismiss='"modal'"><i class='"fa fa-ban'"></i>  Cancel</button>
                <button id='"btnFoundConfirm-". $redPet["id"] ."'" type='"button'" class='"btn btn-primary'" data-dismiss='"modal'"><i class='"fa fa-floppy-o'"></i>  Ja! Ga verder</button>
            </div>
     </div>
    </div>
</div>
.
.
.
<div id='"dropdown-". $redPet["id"] ."'" class='"col-md-6 col-xs-12'" style='"padding-right:10px;z-index:99999999;". $showHideDropdown ."'">
        <!-- Split button -->
        <div class='"btn-group pull-right'">
        <button type='"button'" id='"dataTitle'" data-title='"Beheer informatie over uw dier'" class='"btn btn-success btn-xs'"><i class='"fa fa-pencil-square-o'"></i></button>
        <button type='"button'" id='"dataTitle'" data-title='"Beheer informatie over uw dier'" class='"btn btn-success btn-xs dropdown-toggle'" data-toggle='"dropdown'" aria-haspopup='"true'" aria-expanded='"false'">
        <span class='"caret'" style='"margin-top:0;'"></span>
        <span class='"sr-only'">Toggle Dropdown</span>
        </button>
        <ul id='"drpDown-". $redPet["id"] ."'" class='"dropdown-menu'">
                <li class='"col-lg-12'">
                    <button id='"dataTitle btnFound-". $redPet["id"] ."'" class='"btnFound btn btn-success col-lg-12 col-sm-12 col-md-12 col-xs-12 btn-sm'" data-title='"Klik hier als uw dier gevonden is'" data-target='"#confirmBox-". $redPet["id"] ."'" data-toggle='"modal'"><i class='"fa fa-home'"></i>  Gevonden</button>
                </li>
                <div style='"clear:both;'"></div><li role='"separator'" class='"divide5'"></li>
                <li class='"col-lg-12'">
                    <form action='"dier-toevoegen.php'" method='"POST'">
                        <input type='"hidden'" name='"changeID'" value='"". $redPet["id"] ."'">
                        <button id='"dataTitle'" class='"btn btn-info col-lg-12 col-sm-12 col-md-12 col-xs-12 btn-sm'" data-title='"Klik hier om de informatie over uw dier te wijzigen'" type='"submit'"><i class='"fa fa-pencil'"></i>  Wijzigen</button>
                    </form>
                </li>
                <div style='"clear:both;'"></div>
                <li role='"separator'" class='"divider'"></li>
                <li class='"col-lg-12'">
                    <button id='"dataTitle btnVerwijderen-". $redPet["id"] ."'" class='"linkDelete btn btn-danger col-lg-12 col-sm-12 col-md-12 col-xs-12 btn-sm'" data-title='"Klik hier om uw dier te verwijderen'" href='"#'"><i class='"fa fa-trash'"></i>  Verwijderen</button>
                </li>
            </ul>
        </div>
    </div>
}

我的 ajax 代码是下一个：

（第一个ajax代码，我将数据库字段更新为值1，它工作正常，唯一的问题是因为它已经被调用了更多一次）

<script type="text/javascript">
    $(document).ready(function() {
        $(document).on("click","button[class*=btnFound]", function(e){
            var cijeliID = this.id.split("-");
            var id = cijeliID[1];
            $($("#confirmBox-"+id).data("target")).fadeIn(400);
            $(document).on("click", "#btnFoundConfirm-"+id, function(){
                /*$("#confirmBox-"+id).modal('toggle');*/
                $.ajax({
                    url : "pet-found.php",
                    type: "POST",
                    dataType: "json",
                    data : {id : id, status:"found", sessionCode : "<?php echo $session_code; ?>"},
                    beforeSend: function(){
                        $("#info-middle-register").show();
                    },
                    success: function(msg){
                        $("#info-middle-register").hide();
                        if(msg.result == "Found"){
                            $("#delpetsuccess-"+id).html("<i class='"fa fa-thumbs-o-up'"></i>  Uw huisdier is thuis. De VermisteDieren site wenst u veel plezier met uw beestje.").fadeIn(300).fadeOut(10000);
                            $("#watermark-"+id).show();
                            $("#drpDown-"+id).html("<li id='"liTochGezocht-"+id+"'" class='"col-lg-12'"><button id='"dataTitle btnNotFound-"+id+"'" class='"btnNotFound btn btn-primary col-lg-12 xol-sm-12 col-md-12 col-xs-12 btn-sm'" data-title='"Klik hier als uw beestje toch nog niet gevonden is.'"><i class='"fa fa-arrow-left'"></i>  Toch nog gezocht?</button></li>");
                            $("#dier-"+id).addClass("opacityClass");
                        }else{
                            if(msg.result == "NotFound"){
                                $("#delpeterror-"+id).html("<i class='"fa fa-exclamation-triangle'"></i>  Er is iets misgelopen. Contacteer ons via info@vermistedieren.be.").fadeIn(300).fadeOut(10000);
                            }
                        }
                    },
                    error: function(){
                        $("#info-middle-register").hide();
                        $("#delpeterror-"+id).html("<i class='"fa fa-exclamation-triangle'"></i>  Er is iets misgelopen. Contacteer ons via info@vermistedieren.be.").fadeIn(300).fadeOut(10000);
                    }
                })
            });
            e.preventDefault();
        });
    });
</script>

（第二个代码，我将找到的值的数据库字段更新为值 0）

<!-- Ako klikne na go back kada je zivotinja oznacena kao pronadjena -->
<script type="text/javascript">
    $(document).ready(function() {
        $(document).on("click","button[class*=btnNotFound]", function(e){
            var cijeliID = this.id.split("-");
            var id = cijeliID[1];
            $.ajax({
                url : "pet-found.php",
                type: "POST",
                dataType: "json",
                data : {id : id, status:"notFound", sessionCode : "<?php echo $session_code; ?>"},
                beforeSend: function(){
                    $("#info-middle-register").show();
                },
                success: function(msg){
                    $("#info-middle-register").hide();
                    if(msg.result == "changeMindNotFound"){
                        $("#watermark-"+id).hide();
                        $("#dier-"+id).removeClass("opacityClass");
                        $("#txtFound-"+id).hide();
                        $("#liTochGezocht-"+id).hide();
                        $("#drpDown-"+id).html("<li class='"col-lg-12'"><button id='"dataTitle btnFound-"+id+"'" class='"btnFound btn btn-success col-lg-12 col-sm-12 col-md-12 col-xs-12 btn-sm'" data-title='"Klik hier als uw dier gevonden is'" data-target='"#confirmBox-"+id+"'" data-toggle='"modal'"><i class='"fa fa-home'"></i>  Gevonden</button></li><div style='"clear:both;'"></div><li role='"separator'" class='"divide5'"></li><li class='"col-lg-12'"><form action='"dier-toevoegen.php'" method='"POST'"><input type='"hidden'" name='"changeID'" value='""+id+"'"><button id='"dataTitle'" class='"btn btn-info col-lg-12 col-sm-12 col-md-12 col-xs-12 btn-sm'" data-title='"Klik hier om de informatie over uw dier te wijzigen'" type='"submit'"><i class='"fa fa-pencil'"></i>  Wijzigen</button></form></li><div style='"clear:both;'"></div><li role='"separator'" class='"divider'"></li>                                            <li class='"col-lg-12'"><button id='"dataTitle btnVerwijderen-"+id+"'" class='"linkDelete btn btn-danger col-lg-12 col-sm-12 col-md-12 col-xs-12 btn-sm'" data-title='"Klik hier om uw dier te verwijderen'" href='"#'"><i class='"fa fa-trash'"></i>  Verwijderen</button></li>");
                    }else{
                        if(msg.result == "changeMindFound"){
                            $("#delpeterror-"+id).html("<i class='"fa fa-exclamation-triangle'"></i>  Er is iets misgelopen. Contacteer ons via info@vermistedieren.be.").fadeIn(300).fadeOut(10000);
                        }
                    }
                },
                error: function(){
                    $("#info-middle-register").hide();
                    $("#delpeterror-"+id).html("<i class='"fa fa-exclamation-triangle'"></i>  Er is iets misgelopen. Contacteer ons via info@vermistedieren.be.").fadeIn(300).fadeOut(10000);
                }
            })
        });
    });
</script>

当页面第一次加载时，如果我点击"Gevonden"按钮，一切都很完美。第一个 ajax 代码调用一次就可以了。但是，下拉菜单的列表项更改为只有一个按钮（"toch nog gezoch"）。如果我单击它，则会调用第二个 ajax 代码，它会执行它需要做的事情。

然后，下拉菜单中的列表项再次更改为前三个按钮（Gevonden，Wijzigen，Verwijderen）。比我遇到问题。当我点击gevonden按钮时，第一个ajax代码被调用了两次。每次下一次尝试都是第一次调用一次的 ajax 代码。

有什么闲事吗？提前谢谢。

试试这个:)

<script type="text/javascript">
    $(document).ready(function() {
        $(document).on("click","button[class*=btnNotFound]", function(e){
          // add this around
          if (e.handled !== true) {
            e.handled = true; // prevent firing two times
            // your code

          }

我在我正在处理的项目中遇到了同样的问题，这就是我解决它的方式（这是项目中的实际代码示例）：

$(document).ajaxComplete(function () {
    var didItRun = false; //I'm using this boolean to check if I already ran this code.
    $('#filterForm2GoodsReceived input').change(function () {
        if(didItRun == false)
        {
            $.ajax({
                type: "GET",
                url: "/Receiving/List/",
                data: $('#filterForm2GoodsReceived').serialize(),
                success: function (response) {
                    $('#listReceivingOrders').html(response);
                    return false;
                }
            })
            didItRun = true;
        }
    })
})

我有一个解决方案。正如@JamesThorpe所说，我将一个点击事件与另一个点击事件分开。

<script type="text/javascript">
    $(document).ready(function() {
        $(document).on("click","button[class*=btnFound]", function(e){
            var cijeliID = this.id.split("-");
            var id = cijeliID[1];
            $($("#confirmBox-"+id).data("target")).fadeIn(400);
            e.preventDefault();
        });
    });
</script>
<script type="text/javascript">
$(document).ready(function() {
    $(document).on("click", ".btnFoundConfirm", function(){
        var cijeliID = this.id.split("-");
        var id = cijeliID[1];
        /*$("#confirmBox-"+id).modal('toggle');*/
        $.ajax({
            url : "pet-found.php",
            type: "POST",
            dataType: "json",
            data : {id : id, status:"found", sessionCode : "<?php echo $session_code; ?>"},
            beforeSend: function(){
                $("#info-middle-register").show();
            },
            success: function(msg){
                $("#info-middle-register").hide();
                if(msg.result == "Found"){
                    $("#delpetsuccess-"+id).html("<i class='"fa fa-thumbs-o-up'"></i>  Uw huisdier is thuis. De VermisteDieren site wenst u veel plezier met uw beestje.").fadeIn(300).fadeOut(10000);
                    $("#watermark-"+id).show();
                    $("#drpDown-"+id).html("<li id='"liTochGezocht-"+id+"'" class='"col-lg-12'"><button id='"dataTitle btnNotFound-"+id+"'" class='"btnNotFound btn btn-primary col-lg-12 xol-sm-12 col-md-12 col-xs-12 btn-sm'" data-title='"Klik hier als uw beestje toch nog niet gevonden is.'"><i class='"fa fa-arrow-left'"></i>  Toch nog gezocht?</button></li>");
                    $("#dier-"+id).addClass("opacityClass");
                }else{
                    if(msg.result == "NotFound"){
                        $("#delpeterror-"+id).html("<i class='"fa fa-exclamation-triangle'"></i>  Er is iets misgelopen. Contacteer ons via info@vermistedieren.be.").fadeIn(300).fadeOut(10000);
                    }
                }
            },
            error: function(){
                $("#info-middle-register").hide();
                $("#delpeterror-"+id).html("<i class='"fa fa-exclamation-triangle'"></i>  Er is iets misgelopen. Contacteer ons via info@vermistedieren.be.").fadeIn(300).fadeOut(10000);
            }
        })
    });
});
</script>

并在模态按钮中（Ja！Ga verder）我添加了一个类btnFoundConfirm 并且它起作用了。

相关文章：