Javascript jquery在第一次单击时不能正常工作，但在fiddle中却能正常工作

我在我的程序中使用这个js代码，它在fiddle上运行得很好。在我的程序中，它每一秒都在工作。我正在从部分视图中的xml文件加载人员的数据

在第一次点击时，我在这个人的下方得到一个空白，在第二次点击时，它填充了我想要的信息。当我点击另一个人时，它首先关闭打开的那一个（它不应该关闭，因为我想有和小提琴一样的行为），然后它打开上一个打开的内容，直到我再次点击，然后它更新

我的js：

$(document).on("click", "#btnPeople", function () {
   if ($("tr#" + $(this).data("href")).is(":visible")) {
      $("tr#" + $(this).data("href")).remove();
   }
   else {
      var peopleCallID = $(this).attr("data-id");
      var urlDetails = siteRoot + peopleID + "/peopleDetails";
      $("#peopleInfos").load(urlDetails);
      $(this).closest("tr").after("<tr id='" + $(this).data("href") + "'> <td colspan='5'>"
        + $("#" + $(this).data("href")).html() + "</td> </tr>"); 
   }
});

到

我对javascript和jquery非常陌生，所以如果有一个简单的答案，我很抱歉

我已经去掉了所有额外的脚本和样式表，所以没有冲突。 并尝试：

$(document).ready(function() {
$(document).on("click", "#btnPrintAgent", function() {

谢谢你给我的每一个暗示

编辑：问题解决了

我将代码更改为：

 $(document).on("click", "#btnPeople", function () {
   if ($("tr#" + $(this).data("href")).is(":visible")) {
      $("tr#" + $(this).data("href")).remove();
   }
   else {
      var peopleCallID = $(this).attr("data-id");
      var urlDetails = siteRoot + peopleID + "/peopleDetails";
                $(this).closest("tr").after("<tr id='" + $(this).data("href") + "'> <td colspan='5'>"
        + $("#" + $(this).data("href")).html() + "</td> </tr>"); 
      $("#peopleInfos").load(urlDetails);
   }
});

进入

并将我的html设置为

<button class="btn btn-default btn-sm active show" id="btnPeople" data-href="@item.ID" data-id="@item.ID">
                Details  </button> 

细节

一切都按我的要求进行

谢谢你的帮助，帮我找到了正确的方向

函数load（）在执行加载后为您提供一个触发器

因此，您的代码应该是：

$(document).on("click", "#btnPeople", function () {
    if ($("tr#" + $(this).data("href")).is(":visible")) {
        $("tr#" + $(this).data("href")).remove();
    }
    else {
        var peopleCallID = $(this).attr("data-id");
        var urlDetails = siteRoot + peopleID + "/peopleDetails";
        $("#peopleInfos").load(urlDetails, function() {
            $(this).closest("tr").after("<tr id='" + $(this).data("href") + "'><td colspan='5'>" + $("#" + $(this).data("href")).html() + "</td> </tr>");
        });
    }
});

$（文档）。在（“单击”，“btnPeople”，函数（）{
如果（$（“tr#“+$（this）.data（“href”））是（“：可见”））{
$（“tr#“+$（this）.data（“href”）.remove（）；
}
否则{
var peopleCallID=$（this.attr（“数据id”）；
var urlDetails=siteRoot+peopleID+“/peopleDetails”；
$（“#peopleInfos”）.load（urlDetails，function（）{
“+$”（“#“+$”+$（this）.data（“href”）.html（）+”）之后的“$（this）；
});
}
});

不完全确定，但如果我没有错的话，.load（）函数可以“异步”工作，因此，在调用它之后

 $(this).closest("tr").after("<tr id='" + $(this).data("href") + "'> <td colspan='5'>"
    + $("#" + $(this).data("href")).html() + "</td> </tr>"); 

$（this）.closest（“tr”）.after（“”）
+$（“#”+$（this.data（“href”）.html（）+”）；

数据尚未提取，因此您正在使用旧数据。 尝试像这样更改两行，添加一个回调函数，在加载函数完成后调用

$("#peopleInfos").load(urlDetails, function() {
   $(this).closest("tr").after("<tr id='" + $(this).data("href") + "'> <td colspan='5'>"
    + $("#" + $(this).data("href")).html() + "</td> </tr>"); 
});

$（“#peopleInfos”）.load（urlDetails，function（）{
$（this）.最近的（“tr”）。在（“”）之后
+$（“#”+$（this.data（“href”）.html（）+”）；
});

在发布我的邮件之前，没有看到您的回复。你说得对谢谢你的回答卢卡，我试过了。但当我这么做的时候，什么也没发生。调试器告诉我peopleID现在是“未定义”的，我不能这样理解。。你能把新的代码放在plunker上，然后把新的链接贴在这里，在评论里吗？我会试试的。似乎直到“var urlDetails=siteRoot+peopleID+”/peopleDetails；“一切正常，urlDetails已设置，但以$（“#peopleInfos”）.load（urlDetails，function（）{ID丢失。如果要测试请求，请将代码更改为：$（“#peopleInfos”）.load（urlDetails，function（response，status，xhr）{if（status==“error”）{var msg=“error:”；警报（msg+xhr.status+“”+xhr.statusText）；}）；

  $("#"+peopleCallID).load(urlDetails);

<button class="btn btn-default btn-sm active show" id="btnPeople" data-href="@item.ID" data-id="@item.ID">
                Details  </button> 

$( "#result" ).load( "ajax/test.html", function() {
    alert( "Load was performed." );
});

$(document).on("click", "#btnPeople", function () {
    if ($("tr#" + $(this).data("href")).is(":visible")) {
        $("tr#" + $(this).data("href")).remove();
    }
    else {
        var peopleCallID = $(this).attr("data-id");
        var urlDetails = siteRoot + peopleID + "/peopleDetails";
        $("#peopleInfos").load(urlDetails, function() {
            $(this).closest("tr").after("<tr id='" + $(this).data("href") + "'><td colspan='5'>" + $("#" + $(this).data("href")).html() + "</td> </tr>");
        });
    }
});

 $(this).closest("tr").after("<tr id='" + $(this).data("href") + "'> <td colspan='5'>"
    + $("#" + $(this).data("href")).html() + "</td> </tr>"); 

$("#peopleInfos").load(urlDetails, function() {
   $(this).closest("tr").after("<tr id='" + $(this).data("href") + "'> <td colspan='5'>"
    + $("#" + $(this).data("href")).html() + "</td> </tr>"); 
});