2

Im trying to add more feature in zabuto calendar. That is a modal will appear after click on date, allow we to add or remove event for this day. But i can't catch event click on the button in this modal. Here is my code.

function createModal() {
// create a modal
//...
 var $modalFooterButtonSave = $('<button id="btnSave">Save</button>');
 var $modalFooterButtonDelete = $('<button id="btnDelete">Delete</button>');
//...
//return this modal
}

function myDateFunction() {
//Add modal into html page
$("#myModal").html(createModal());
//Show modal
$('#adjustModal').modal('show');
return true;
}
$(document).ready(function () {
    // zabuto event click on date
    $("#my-calendar").zabuto_calendar({
        action: function () {
            return myDateFunction();
        }
    });
    //Here is problem, i can't catch the event click on this button.
    $("#btnSave").click(function(){
        alert("The btn Save was clicked.");
    });
}
Kyle
  • 67
  • 2
  • 10

1 Answers1

6

Use this instead:

$(document).on('click', '#btnSave', function(){
    alert("The btn Save was clicked.");
});
michelem
  • 14,430
  • 5
  • 50
  • 66
  • If `#btnSave` doesn't exist in the DOM when this code executes, what do you expect this to accomplish? – David Nov 01 '15 at 17:07
  • I understood it will be added by the modal. – michelem Nov 01 '15 at 17:09
  • It will, and that's exactly the problem faced by the OP. This code executes when the page loads, and the element is added to the page at a later time. Your solution has the same problem as the original code. `$("#btnSave")` doesn't find any elements at the time that it executes. – David Nov 01 '15 at 17:10
  • You are right, answer updated. – michelem Nov 01 '15 at 17:12
  • thank you so much, it work now ^^ – Kyle Nov 01 '15 at 17:14