javascript - jquery 在第一次点击时无法正常工作，但在 fiddle 中它确实如此

Question

我在我的程序中使用这个 js 代码 http://jsfiddle.net/yeyene/JyfPg/1/它在 fiddle 上工作得很好。在我的程序中，它正在处理每一次点击。我在局部 View 中从 xml 文件加载人员数据。

在第一次点击时，我在 Person 下方得到了一个空白空间，在第二次点击时，它填充了我想要的信息。当我点击第二个 Person 时，它首先关闭打开的那个(它不应该关闭，因为我想要与 fiddle 中的行为相同)然后它打开最后一个打开的内容直到我再次单击然后它更新...

我的代码:

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

我的 html:

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

我现在坐在这里安静了一会儿，首先我的 js 不工作，所以我不得不从

$(function () { $("#btnPeople").click("click", function () {

到

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

我真的是 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);
   }
});

现在它正在正常加载。

通过改变

  $("#peopleInfos").load(urlDetails);

进入

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

并将我的 html 设置为

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

一切如我所愿。

感谢所有帮助，让我朝着正确的方向前进!

Answer 1

函数 load() 在加载完成后给你一个触发器。 http://api.jquery.com/load/

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