点击事件的Ajax不起作用

时间:2016-01-29 16:02:04

标签: php jquery html ajax twitter-bootstrap

我的代码有一个问题。单击事件不会在另一个事件之后工作。我的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=\"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=\"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>";

我的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 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>

<!-- 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);
                }
            })
            e.preventDefault();
        });
    });
</script>

下拉菜单中的按钮VERWIJDEREN正常工作。如果我点击它,我会得到一个弹出框,以确认我要删除它。如果我点击它,它就可以了。

还有GEVONDEN按钮,如果我点击下拉菜单中的GEVONDEN按钮,我会得到我需要确认的模态。如果我确认一下,没关系。然后是下拉菜单更新,只有一个按钮TOCH NOG GEZOCHT,如果我点击它,它工作正常。

但我的问题是,如果我点击按钮GEVONDEN,然后&#34;我改变主意&#34;然后我点击按钮TOCH NOG GEZOCHT,然后我想删除它(按钮VERWIJDEREN上的clcik)它不起作用。引导弹出窗口的样式也发生了变化。如果我点击NO就可以了,但如果我点击YES则没有任何结果。在控制台中我什么也看不见。

有什么建议吗?感谢。

0 个答案:

没有答案