Javascript Onclick仅在第二次单击后工作

我有一个HTML列表，看起来像

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

---

问题是函数只有在点击两次这样的链接后才会将数据加载到所有字段（

text\u form

和

f\u name

）。即使我先点击一个文件，然后点击另一个文件，它也能工作。有没有办法解决这个问题？

您不需要

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

3.txt
//其他链接在这里
$（“#链接文件a”）。单击（函数（事件）{
var file_name=event.target.id；
$（“#f#u name”）.val（文件名）；
$.ajax({
url:“docs/”+文件名，
数据类型：“文本”，
成功：功能（数据）{
$（“#文本形式”）.val（数据）；
$（'#text_form'）。removeAttr（'readonly'）；
$（“#删除按钮”）.removeAttr（'disabled'）；
$（“#保存按钮”）.removeAttr（'disabled'）；
}
})
});

您当前正在做的是将onclick事件添加到一个链接，该链接调用一个函数，该函数通过jQuery添加另一个onclick事件

---

删除

onclick

属性和

open_file（）

函数包装器，以便jQuery按预期添加事件。

当html中有

onclick

时，无需在函数中再次绑定单击事件

---

另外，对于未定义的

$，

，您需要将jquery库放在头部。

首先单击运行

打开文件（）

。随后的单击将运行由

open\u file（）

放置的单击处理程序。我们需要查看您的HTML以找到正确的修复方法。i、 e什么是

#text_form

，

#delete_button

，“#save_button”等等-请记住，您正在进行AJAX调用（即异步），因此您必须等待服务器的响应并相应地处理它…我已经根据您的建议修改了我的代码，现在Chrome调试器只是在这一行上说“$未定义”$（“a”）。单击（function（event）“我猜在加载页面时您还没有加载jQuery。有关这方面的更多信息，请参阅。因此我必须用“$（document）.ready（function（）{”来包围我的事件侦听器。”？是的，以及所有未来的jQuery代码。例外情况是定义标准Javascript的函数和变量。如果调用的函数的jQuery语法在$（document.ready（{}）之外包装器，Javascript将抛出一个错误，因为jQuery尚未准备好运行。问题可能是因为我在HTML页面中包含JS文件后又包含了jQuery文件？是的，您需要先放置jQuery文件，然后再放置您的文件。

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