Destroy jquerytools overlay

I'm currently struggling to understand why and how to fix a little problem that i'm facing. Here is my code:

<style>
.modal {
    background-color:#fff;
    display:none;
    width:350px;
    padding:15px;
    text-align:left;
    border:2px solid #333;

    opacity:0.8;
    -moz-border-radius:6px;
    -webkit-border-radius:6px;
    -moz-box-shadow: 0 0 50px #ccc;
    -webkit-box-shadow: 0 0 50px #ccc;
}
</style>


<p><button class="modalInput">Yes or no?</button></p>

<!-- yes/no dialog -->
<div class="modal" id="yesno">
    <h2>This is a modal dialog</h2>

    <!-- yes/no buttons -->
    <p><button class="close"> Yes </button> <button class="close"> No </button></p>
</div>


$(document).on("click", ".modalInput", function() {
    $("#yesno").overlay({
        api: true,
        mask: { color: '#ebecff', loadSpeed: 200, opacity: 0.9 }
    }).load();


    var buttons = $("#yesno button").click(function(e) {
        // get user input
        var yes = buttons.index(this) === 0;

        if(yes) { // user has confirmed
            console.log("execute ajax");
        }
    });

    return false;
});

everything works fine, but the more i open the overlay, the more console.log("execute ajax"); is executed! so for example if i open the overlay and close it, I open it again and close and for the third time i open it and then click on "Yes", it looks like the script is run 3 times.... :/ do you know what is wrong?

Thanks a lot