Click event Recurrence binding problem in jquery

In recent projects, you have encountered such a problem:

Remove a product from your wishlist, 1. If the deletion is determined directly, the deletion succeeds, 2. If you cancel the deletion, click again to confirm the deletion, the problem will occur, and the test finds:

For a future element (an object with the class name Deletefav), in the Click event, if the function also contains a click event with an element (called a), the Click event of the A element appears repeatedly bound when the two delete button is clicked

$ ("Body"). On ("click", ". Deletefav", function () {//Click delete button
var id=$ (this). attr ("id");
$ (". Alertbtns"). Append ("<span class= ' Cancel ' style= ' margin-left:14px; ' >CANCEL</span> ");
$ (". Alertwindow. Tips"). HTML ("is sure you want-remove this Photo from the favorites?");
$ (". Alertwindow"). Show ();
$ (". Alertbtns. conf"). Click (Function (event) {

Alert ("Test"); //------A second click. deletefav will find pop-up two times test
Location.href=rootdomain + '/wishlists/delete/' +id;
});

});

Workaround, first unbind, then bind

$ ("Body"). On ("click", ". Deletefav", function () {//Click delete button
var id=$ (this). attr ("id");
$ (". Alertbtns"). Append ("<span class= ' Cancel ' style= ' margin-left:14px; ' >CANCEL</span> ");
$ (". Alertwindow. Tips"). HTML ("is sure you want-remove this Photo from the favorites?");
$ (". Alertwindow"). Show ();
　　$ (". Alertbtns. conf"). Unbind ("click"). Click (Function (event) {
Location.href=rootdomain + '/wishlists/delete/' +id;
});

});

Click event Recurrence binding problem in jquery