Вопрос по twitter-bootstrap, jquery, ajax, php, jquery-events – Событие клика не работает

0

У меня есть одна проблема с моим кодом. Событие в один клик не работает после другого.

Мой AJAX и JQuery код, как показано ниже:

 <!-- Ovdje izbacujemo modal za potvrdu kad se klikne na gevonden i onda ako je kliknuto na potvrdi odradi se update baze sa ajaxom -->
<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 col-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 [email protected]").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 [email protected]").fadeIn(300).fadeOut(10000);
            }
        })
    });
});

</script>

И мой PHP-код следующий:

 $found = $redPet["found"];
if($found == 1){
    $opacityClass = "opacityClass";
    $watermark = "display:block;";
    $showHideDropdown = "display:none;";
    $menu = "<div id=\"dropdown-". $redPet["id"] ."\" class=\"col-md-6 col-xs-12\" style=\"padding-right:10px;z-index:99999999;\">
                <!-- 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 id=\"liTochGezocht-". $redPet["id"] ."\" class=\"col-lg-12\">
                        <button id=\"dataTitle btnNotFound-". $redPet["id"] ."\" class=\"btnNotFound btn btn-primary col-lg-12 col-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>
                  </ul>
                </div>
            </div>";
    $found = "<span id=\"txtFound-". $redPet["id"] ."\" style=\"color:#f27935;\"> (Gevonden!)</span>";
}else{
    $watermark = "display:none;";
    $showHideDropdown = "display:block;";
    $opacityClass = "";
    $menu = "<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 btnAria-". $redPet["id"] ."\" 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\" style=\"outline:0;\" 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\" style=\"outline:0;\" 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=\"btnVerwijderen-". $redPet["id"] ."\" class=\"linkDelete btn btn-danger col-lg-12 col-sm-12 col-md-12 col-xs-12 btn-sm\" style=\"outline:0;\" data-title=\"Bent u zeker dat u <b>". $redPet["name"] ."</b> wilt verwijderen?\" data-toggle=\"confirmation\" data-placement=\"left\" data-singleton=\"true\" data-popout=\"true\" data-btn-ok-label=\"Ja!\" data-btn-ok-icon=\"glyphicon glyphicon-share-alt\" data-btn-ok-class=\"btnYesDelete-". $redPet["id"] ." btn-success btn-xs btnYesDelete\" data-btn-cancel-label=\"Noo!\" data-btn-cancel-icon=\"glyphicon glyphicon-ban-circle\" data-btn-cancel-class=\"btn-danger btn-xs btnNoDelete\"><i class=\"fa fa-trash\"></i>  Verwijderen</button>
                    </li>
                  </ul>
                </div>
            </div>";
    $found = "";
}

echo "  <article id=\"dier-". $redPet["id"] ."\" class=\"blogpost ". $opacityClass ."\" style=\"position:relative;\">
            <div id=\"watermark-". $redPet["id"] ."\" class=\"watermark col-lg-12 col-sm-12 col-md-12 col-xs-12\" style=\"". $watermark ."\"></div>
            <div id=\"info-middle-register\" style=\"display:none;z-index:99999999;\"><img src=\"img/ajax-loader.gif\" title=\"Even geduld aub\"></div>

            <!-- Box za potvrdu da je zivotinja pronadjena -->

            <div id=\"confirmBox-". $redPet["id"] ."\" class=\"modal fade bs-example-modal-xs\" tabindex=\"-1\" role=\"dialog\" aria-labelledby=\"mySmallModalLabel\">
              <div class=\"mo,dal-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=\"btnFoundConfirm btn btn-primary\" data-dismiss=\"modal\"><i class=\"fa fa-floppy-o\"></i>  Ja! Ga verder</button>
                  </div>
                </div>
              </div>
            </div>

            <!-- TABLE VIEW FOR BLOG POST -->
            <div class=\"table-blogarticle\">
                <!-- Slika -->
                <div class=\"media-table-cell-\">
                    <!-- BLOG IMAGE -->
                    <section class=\"media-wrapper\">
                            <div class=\"mediaholder\">
                                <a href=\"#\"><img alt=\"". $redPet["name"] ."\" src=\"". $photoPath ."\" style=\"width:100%\" class=\"blogPhoto\"></a>
                                <div class=\"hovercover\">
                                    <a href=\"#\"><div class=\"linkicon notalone\"><i class=\"icon-link-1 white\"></i></div></a>
                                    <a href=\"#\"><div class=\"lupeicon notalone\"><i class=\"icon-search-1 white\"></i></div></a>
                                </div>
                            </div>
                    </section>
                </div><!-- Kraj slike -->

                <div class=\"divide20 visible-phone\"></div>
                <!-- THE CONTENT HOLDER TABLE CELL -->
                <div class=\"blogcontent-table-cell\">
                    <h2 class=\"blog-title pull-left col-md-6 col-xs-12\" style=\"padding-left:10px;\">". $redPet["name"] . $found . " </h2>
                    ". $menu ."
                    <div style=\"clear:both;\"></div>
                    <div class=\"divide5\"></div>
                    <!-- BLOG ATTRIBUTES -->
                    <div style=\"padding-left:10px;\">
                        <div class=\"gray-boxed verysmall gray leftfloat rm5 bm5 blgAttr\"><i class=\"fa fa-calendar-times-o fa-2x rm10\"></i>Vermist : <u>". $lostDate ."</u></div>
                        <div class=\"gray-boxed verysmall gray leftfloat rm5 bm5 blgAttr\"><i class=\"fa fa-map-marker fa-2x rm10\"></i>Plaats : <u>". $redPet["lostPlace"] ."</u></div>
                        <div class=\"gray-boxed verysmall gray leftfloat rm5 bm5 blgAttr\"><i class=\"fa fa-paint-brush fa-2x rm10\"></i>Kleur : <u>". $redPet["color"] ."</u></div>
                        <div class=\"gray-boxed verysmall gray leftfloat rm5 bm5 blgAttr\"><i class=\"fa fa-paw fa-2x rm10\"></i>Ras : <u>". $redPet["breed"] ."</u></div>
                        <div class=\"gray-boxed verysmall gray leftfloat rm5 bm5 blgAttr\"><i class=\"fa fa-eye fa-2x rm10\"></i><u>". $redPet["views"] ."</u></div>
                    </div>
                    <div class=\"clear\"></div>
                    <div class=\"divide10\"></div>
                    <p class=\"small darkgray\" style=\"padding:0 10px 0 10px;text-align:justify;\">". $details ."</p>
                    <div class=\"divide10\"></div>
                    <a id=\"dataTitle\" class=\"btn small maincolor witharrow pull-right\" href=\"huisdier-details.php?id=". $redPet["id"] ."\" style=\"margin:0 15px 15px 0;\" data-title=\"Nog meer details over ". $redPet["name"] ."\">Lees meer</a>
                    <div class=\"divide10\"></div>
                    <div style=\"clear:both;\"></div>
                </div><!-- END OF CONTENT HOLDER TABLE CELL-->
            </div>
        </article>";

Кнопка VERWIJDEREN в выпадающем меню работает нормально. Если я (после загрузки страницы) нажимаю на нее, я получаю всплывающее окно, чтобы подтвердить, что я хочу удалить его. И если я нажимаю на ДА, это работает.

Моя проблема в том, что если я нажму на кнопку GEVONDEN, а затем нажму на кнопку TOCH NOG GEZOCHT (в основном, DO и UNDO - пока здесь она не работает идеально).

Но затем, если я хочу удалить его (например, если я нажму на кнопку VERWIJDEREN), он не будет работать. Стиль загрузочного поповера также изменился. Если я нажму на НЕТ, это нормально, но если я нажму на ДА, то ничего не произойдет Если я обновлю страницу, то это работает без проблем. В консоли ничего не вижу, при этом нет сообщения об ошибке.

Какие-либо предложения? Благодарю.

ОБНОВЛЕНО:

Скрипт для btnNotFound

<!-- 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 [email protected]").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 [email protected]").fadeIn(300).fadeOut(10000);
                }
            })
            e.preventDefault();
        });
    });
</script>

Кнопки YES и NO выглядят примерно так:

    <a class="btn btn-xs btn-primary" data-apply="confirmation" href="#">
<i class="glyphicon glyphicon-ok"></i>
Yes
</a>
<a class="btn btn-xs btn-default" data-dismiss="confirmation">
<i class="glyphicon glyphicon-remove"></i>
No
</a>

Скрипт для отмены всплывающего окна:

    <script type="text/javascript">
$(document).ready(function() {
         $(".linkDelete").on("canceled.bs.confirmation", function(e){
             e.stopPropagation();
             if ($(e.target).data('toggle') !== 'confirmation' && $(e.target).parents('[data-toggle="confirmation"]').length === 0 && $(e.target).parents('.popover.in').length === 0) { 
                $('[data-toggle="confirmation"]').confirmation();
                $('[data-toggle="confirmation"]').confirmation('hide');
            }
            $(this).confirmation();
            $(this).confirmation('hide');
         });
    });
    </script>

И для подтверждения:

<!-- Ovdje obradjujemo klik na YES button u conformation boxu -->
<script type="text/javascript">
$(document).ready(function() {
    $('.linkDelete').on('confirmed.bs.confirmation', function (e) {
      var cijeliID = this.id.split("-");
      var id = cijeliID[1];
      $.ajax({
            url : "delete-pet.php",
            type: "POST",
            dataType: "json",
            data : {id : id, sessionCode : "<?php echo $session_code; ?>"},
            beforeSend: function(){
                $("#info-middle-register").show();
            },

            success: function(msg){
                $("#info-middle-register").hide();
                if(msg.result == "Deleted"){
                    /*$("#delpetsuccess-"+id).html("<i class=\"fa fa-thumbs-o-up\"></i>  Uw huisdier is succesvol verwijderd.").fadeIn(300).fadeOut(2000);*/
                    $("#hrLine-"+id).fadeOut(2000);
                    if(msg.resultPhotos == "PhotosNotDeleted"){
                        $("#delpetwarning-"+id).html("<i class=\"fa fa-exclamation-triangle\"></i>  De fotos van uw huisdier zijn niet succesvol verwijderd.").fadeIn(300).fadeOut(2000);
                    }
                    if(msg.nr_pets > 0){
                        $("#dier-"+id).fadeOut(2000);
                        $("#totalPets").html(msg.nr_pets);
                    }else{
                        $("#dier-"+id).fadeOut(2000);
                        $("#totalPets").html(msg.nr_pets);
                        $("#noPets").html("<h3 style=\"font-weight:400;color:#8a6d3b;\">Momenteel hebt u geen huisdieren.</h3> <a id=\"dataTitle\" href=\"dier-toevoegen.php\" data-title=\"Voeg een huisdier toe\" class=\"alert-link\">Klik hier</a> om een huisdier toe te voegen.").fadeIn(2000);
                        $(".tb-pagination").hide();
                    }

                }else{
                    if(msg.result == "NotDeleted"){
                        $("#delpeterror-"+id).html("<i class=\"fa fa-exclamation-triangle\"></i>  Er is iets misgelopen. Uw huisdier is niet succesvol verwijderd. Contacteer ons via [email protected]").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 [email protected]").fadeIn(300).fadeOut(10000);
            }
        })

    })
});
</script>
Не вижу кнопкиTOCH NOG GEZOCHT  в вашем коде. Это обрабатывается как делегированное событие с.on()? Jay Blanchard
Привет. Он добавляется после успеха ajax во втором теге скрипта. Событие .on обрабатывается с помощью третьего тега script. Boky

Ваш Ответ

1   ответ
2

Так же, как событие щелчка делегируется для.btnFound обработчик кликов для.btnNotFound (класс, связанный сTOCH NOG GEZOCHT) должен быть делегирован, тем более что он добавляется динамически через JavaScript:

$(document).on("click","button[class*=btnNotFound]", function(e){...
Я добавил их к вопросу. Я использую те события с сайта, где я его скачал. Boky
Я понимаю это, но нам нужно взглянуть на это, если мы собираемся диагностировать проблему. Jay Blanchard
Вы знаете, где находятся обработчики щелчков для этих двух кнопок? Jay Blanchard
btnFound != btnNotFound и я вижу только обработчик щелчка для первого. Jay Blanchard

Похожие вопросы