title: Onclick works only after second click
body: <p>I have a list in HTML which looks like</p>
  
  <pre><code>&lt;a onclick="open_file()" id="3.txt"&gt;3.txt&lt;/a&gt;
  </code></pre>
  
  <p>My <code>open_file()</code> function is looking this</p>
  
  <pre><code>function open_file() {
      $("a").click(function (event) {
          var file_name = event.target.id;
          $("#f_name").val(file_name);
          $.ajax({
              url: "docs/" + file_name,
              dataType: "text",
              success: function (data) {
                  $("#text_form").val(data);
                  $('#text_form').removeAttr('readonly');
                  $('#delete_button').removeAttr('disabled');
                  $('#save_button').removeAttr('disabled');
              }
          })
      });
  }
  </code></pre>
  
  <p>The problem is function finally loads data into all fields(<code>text_form</code> and <code>f_name</code>) only after two clicks on such link. It works even if I at first click on one file, then click on another and it loads. Is there any way to fix this?</p>