Question

我在我的程序http://jsfiddle.net/yeyene/JyfPg/1/中使用这个js-code，它在小提琴上运行得很好。在我的程序中，它每次点击都会工作。我在部分视图中从xml文件加载People的数据。

在第一次点击时，我在Person下方得到一个空白区域，在第二次点击时，它填充了我想要的信息。当我登上第二个人时，它首先关闭打开的人（它不应该，因为我希望与小提琴具有相同的行为），然后它打开上一个打开的内容，直到我再次点击然后它更新...

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

我的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

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

Answer 2

不完全确定，但如果我没有错，.load（）函数可以正常工作＆＃34; asyncronous＆＃34;，因此，在它之后你打电话

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

jquery在第一次点击时工作不正常，但在小提琴中它会

2 个答案: