Ragnar Ragnar - 1 month ago 11
jQuery Question

Button click execute 2 times on modal jquery

I don't understand why the button click event it's firing 2 times....I'm drawing 2 cards on materialize css ...and when I press the button it checks if the client session is start, and do something...else it opens a modal. But the click must fire only 1 time, I'm getting 2 times alert("chango"), on 1 click...HELP PLS!!, here is the code:

function list_section(data) {

var p = JSON.parse(data); // 2 results
$.each(p, function(i, item) {
if (item.SECTION_ID == 1) {



$("#president").append(
'<div class="col s6">' +
'\<div class="card medium sticky-action" id="president_'+item.POLITIC_ID+'">' +
'<div class="card-image waves-effect waves-block waves-light">' +
'<div class="video-container">' +
' <iframe src="' + baseurl + 'public/uploads/' + item.POLITIC_FILE + '" frameborder="0" allowfullscreen controls></iframe>' +
'</div>' +
'</div>' +
'<div class="card-action">' +
'<span class="card-title activator grey-text text-darken-4">' + item.POLITIC_NAME + '&nbsp' + item.POLITIC_LASTNAME + '<i class="material-icons right">more_vert</i></span>' +
'<div class="row" style="margin-top:10px;margin-bottom:0px;">' +
'<div class="col s3">' +
'<button class=" btn waves-effect modal-trigger waves-light red darken-3 disapprove disapprove_president" data-target="verification" type="submit" name="action" ">Desapruebo</button>' +
'</div>' +
'<div class="col s3 offset-s4">' +
'<button class=" btn waves-effect modal-trigger waves-light light-green darken-3 aprove aprove_president" data-target="verification" type="submit" name="action" ">Apruebo</button>' +
'</div>' +
'</div>' +
'</div>' +
'<div class="card-reveal">' +
'<span class="card-title grey-text text-darken-4">' + item.POLITIC_NAME + '&nbsp' + item.POLITIC_LASTNAME + '<i class="material-icons right">close</i></span>' +
'<p>Here is some more information about this product that is only revealed once clicked on.</p>' +
'</div>' +
'</div>' +
'<input type="hidden" id="' + item.POLITIC_ID + '">' +
'</div>'

);

$(document).on('click', '.aprove , .disapprove', function() {
// $(".aprove , .disapprove").unbind("click");
// $(".aprove , .disapprove").on("click", selectKeepFirstOfAll);

if (sesion != "") {

if ($(this).attr('class').split(' ').pop() == 'aprove_president') {

alert("chango");

var data = {



}

$.ajax({
url: baseurl+'result/aprove',
type: 'POST',
data: data
})
.done(function() {
console.log("success");
})
.fail(function() {
console.log("error");
})
.always(function() {
console.log("complete");
});

}
else if ($(this).attr('class').split(' ').pop() == 'disapprove_president') {

}

}

else {
$('#verification').openModal();
}

});
}

Answer

Move the $(document).on('click'...) outside the list_section function (make it global). You're adding an onclick handler for every section you process.

Comments