OnClick работает только после второго щелчка

Question

У меня есть список в HTML, который выглядит как

<a onclick="open_file()" id="3.txt">3.txt</a> 

Моя open_file() функция ищет эту

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'); 
      } 
     }) 
    }); 
} 

Проблема заключается функция, наконец, загружает данные во всех областях (text_form и f_name) только после двух кликов по такой ссылке. Он работает, даже если я сначала нажимаю на один файл, затем нажимаю на другой, и он загружается. Есть ли способ исправить это?

Answer 1

Что вы сейчас делаете, добавив событие OnClick в ссылку, которая вызывает функцию , что добавляет еще одно событие OnClick с помощью JQuery.

Удалите свойство onclick и оболочку функции open_file(), чтобы jQuery добавила событие, как вы планировали.

Answer 2

Вам не нужно onclick="open_file()" это:

<div id='linkstofiles'> 
    <a id="3.txt">3.txt</a> 
    //other links go here 
</div> 

$("#linkstofiles 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'); 
     } 
    }) 
}); 

Answer 3

Вам не нужно связывать событие click снова в функции, если у вас есть onclick в вашем html.

Также для $ is not defined вам необходимо разместить библиотеку jquery в голове.