Onclick works only after second click

Question

I have a list in HTML which looks like

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

My open_file() function is looking this

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

The problem is function finally loads data into all fields(text_form and f_name) 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?

Answer 1

What you're currently doing is adding an onclick event to a link that calls a function that adds another onclick event via jQuery.

Remove the onclick property and the open_file() function wrapper so that jQuery adds the event as you intended.