问题
I have one problem with my code. The one click event doesn't work after another one.
My ajax and jquery code is as below:
<!-- 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>
And my php code is next :
$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\">×</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>";
The button VERWIJDEREN in the dropdown menu works ok. If I (after the page is loaded) click on it I get an popover box to confirm that I want to delete it. And if I click on YES, it works.
My problem is, if I click on button GEVONDEN and then I click on the button TOCH NOG GEZOCHT (basically DO and UNDO - until here it works perfect).
But then if I want to delete it (thus if I click on the button VERWIJDEREN) it doesn't work. The style of the bootstrap popover is also changed. If I click on NO it is ok, but if I click on YES nothing happends. If I refresh the page then it works without problems. In the console I see nothing, thus there is no any error report.
Any suggestions? Thanks.
UPDATED:
Script for 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 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>
YES and NO buttons are something like this :
<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 for canceling popup :
<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>
And for the confirming :
<!-- 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 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>
回答1:
Just as the click event is delegated for the .btnFound the click handler for .btnNotFound (the class associated with TOCH NOG GEZOCHT) must be delegated, especially since it is added dynamically via JavaScript:
$(document).on("click","button[class*=btnNotFound]", function(e){...
来源：https://stackoverflow.com/questions/35184381/click-event-is-not-working