Click Event funktioniert nicht
Ich habe ein Problem mit meinem Code. Das One-Click-Ereignis funktioniert nicht nach dem anderen.
Mein Ajax- und JQuery-Code lautet wie folgt:
<!-- 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>
Und mein PHP-Code ist der nächste:
$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\">×</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>";
Die Schaltfläche VERWIJDEREN im Dropdown-Menü funktioniert einwandfrei. Wenn ich (nachdem die Seite geladen wurde) darauf klicke, erhalte ich ein Popover-Fenster, um zu bestätigen, dass ich es löschen möchte. Und wenn ich auf JA klicke, funktioniert es.
Mein Problem ist, wenn ich auf die Schaltfläche GEVONDEN klicke und dann auf die Schaltfläche TOCH NOG GEZOCHT klicke (im Grunde DO und UNDO - bis hier funktioniert es perfekt).
Aber wenn ich es dann löschen will (also wenn ich auf den Button VERWIJDEREN klicke) klappt es nicht. Der Stil des Bootstrap-Popovers wird ebenfalls geändert. Wenn ich auf NEIN klicke, ist es in Ordnung, aber wenn ich auf JA klicke, passiert nichts. Wenn ich die Seite aktualisiere, funktioniert es ohne Probleme. In der Konsole sehe ich nichts, daher gibt es keinen Fehlerbericht.
Irgendwelche Vorschläge? Vielen Dank
AKTUALISIERT
Script für 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>
ie Schaltflächen @YES und NO sind ungefähr so:
<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 zum Abbrechen des Popups:
<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>
Und zur Bestätigung:
<!-- 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>