Why is event parameter forgotten after recursion?

Why is event parameter forgotten after recursion?

Consider the following code: 

<html> <head> <meta charset="UTF-8"> <title>title...</title> <link type="text/css" rel="stylesheet" href="jquery-ui-1.10.4.custom.css" /> <script type="text/javascript" src="jquery-1.10.2.js"></script> <script type="text/javascript" src="jquery-ui-1.10.4.custom.min.js"></script> </head> <body> <div id="dialog1" style="display: none"> <p>some text</p> </div> <input id="but1" type="button" value="clickme" /> </body> <script> $("#but1").on ('click', {valu: 1}, f); $("#dialog1").dialog({ autoOpen:false }); function f (event) { console.log(event.data.valu); // EXISTS $.ajax({ type: "POST", url: "event.xml", dataType: "xml", success: function (result) { console.log(event.data.valu); // DOESN'T EXIST var promptDialog = $("#dialog1"); var promptDialogButtons = {}; promptDialogButtons['ok'] = function(){ $("#dialog1").on('click', { valu: 0 }, f); $("#dialog1").click(); $("#dialog1").dialog('close'); }; promptDialogButtons['cancel'] = function(){ $("#dialog1").dialog('close'); }; promptDialog.dialog({ width:333, modal: true, title: "sometitle", buttons:promptDialogButtons}); $("#dialog1").dialog('open'); } }); } </script> </html>


When clicking on "clickme" and then "ok" the output will be: 

  1. 1 1 0 TypeError: event.data is null
Why is  event.data.valu  forgotten in the  $.ajax()  after recursion? No redeclaration of parameter  event  in the  $.ajax() . Please fill in the valid path to the JQuery libraries. Use any valid  event.xml file.