.load callback has been called five times

Question

The code I am using is shown below, I am pretty sure I am missing a point but could not find out.

What I am doing is, when user press the button, a fragment of the page has been loaded. After successful loading I need to do some business(just once ofc.), unfortunately, callback function seems to be called exactly 5 times. I have tried basic google solutions but no chance. Thanks in advance.

val = 1;
$( "#signup" ).click(function( event ) {
    event.preventDefault();
    $( ".container" ).load("/signup", function(event) {
        console.log("val: "+val);
        val++;
     });
});

and the console log shows

val: 1
val: 2
val: 3
val: 4
val: 5

PS: I am not sure if it is related or not but the project also uses laravel and bootstrap.

Answer 1

don't you have many '.container' in your html ? log $( ".container" ) for checking