I have written a function that performs a specific task when the dialog closes.

I need to stress here that inside the dialog box I have put various input elements.

Here is the function that closes the dialog box(upon clicking the cancel button) along with another action to be accomplished.

2. close: function() {//this function is called when I press the cancel button
3.             this.$('#services').val('').trigger('chosen:updated');//this code updates the status of a jquey plugin named chosen
4.             this.el.dialog('close');

The above function is triggered from this code:

2.    render: function() {
3.             var buttons = {'Ok': this.save};
4.             if (!this.model.isNew()) {
5.                 _.extend(buttons, {'Delete': this.destroy});
6.             }
7.             _.extend(buttons, {'Cancel': this.close});//with this code the above function is triggered            
8.             this.el.dialog({
9.                 modal: true,
10.                 title: (this.model.isNew() ? 'Νew ' : 'Edit') + 'Appointment',
11.                 buttons: buttons,
12.                 open: this.open,
13.                 width: 500
14.             });
15. 
    

The problem has to do with the first code segment I gave you in line 3.

The code in line 3 is effective only upon pressing the cancel button and not when clicking the x symbol on the top right of the dialog box.

Why that happens?