【问题标题】:Accessing dynamically generated content in jquery在 jquery 中访问动态生成的内容
【发布时间】:2012-01-26 09:14:21
【问题描述】:

我最近刚刚了解了 jquery 如何访问动态生成的内容,方法是在其父对象(或第一个可用的非动态父对象)周围放置一个“气泡”,然后告诉它如何处理其中的事件等等

我有一个表(静态)并且行是动态添加的。

<table class="aBorder_ClearBlack" width="100%" id="tblEveryone">
  <tr class="TableHeading_Dark_Small">
    <td>Current User Calls</td>
    <td><span id="theRefresh" style="cursor:pointer">
        <img ... onclick="javascript:clicky()"...></span>
    </td>
 </tr>

以及添加行的代码:

function clicky() {
    var table = document.getElementById("tblEveryone");
    var tmpRowCount = table.rows.length;

    //clear existing rows first (else it just appends)
    for (var x = 2; x < tmpRowCount; x++) {
        table.deleteRow(x);
        tmpRowCount--;
        x--;          
    }

    jQuery.each(users, function (index, user) {
        var rowCount = table.rows.length;
        var row = table.insertRow(rowCount);
        row.style.display = "none"; <--------  
        row.setAttribute('class', 'BeforeHover_Clean');    

        var cell1 = row.insertCell(0);
        cell1.innerHTML = users[index].Name;

        var cell2 = row.insertCell(1);
        cell2.innerHTML = users[index].Calls;
    });

    $(".BeforeHover_Clean").show(); <-----
}

然后是我用来“绑定”每行点击事件的代码

$(document).ready(function () {
  $('#tblEveryone').delegate(".BeforeHover_Clean", "click", function () {
    var whatClicked = this.innerHTML.toLowerCase().split("</td>")[0].split("<td>")[1];
    document.getElementById("aIframe").src = "Calls.aspx?aUser=" + whatClicked;
   });
});

事情是(上面标有row.style.display,正确地从没有可见性的项目开始,但最后一行,$(".BeforeHover_Clean").show(); 显然不会工作,因为内容是动态的。 有没有办法操纵委托或其他一些 jquery 功能,以便在需要时再次设置项目可见?

我对这个级别一无所知。将“单击”事件绑定到父级就像我得到的一样好!哈哈。我现在感觉像查尔斯巴贝奇! ;)

【问题讨论】:

标签: javascript jquery dynamic delegates


【解决方案1】:

它是动态的这一事实并不重要。

你有一个相当奇怪的 jQuery 和 DOM JavaScript 组合,这可能没有帮助,而且还会大大膨胀你的代码。

例如,您的each 循环可以压缩如下:

jQuery.each(users, function (index, user) {
    var $newRow = $("<tr class='BeforeHover_Clean'><td>" + users[index].Name+ "</td><td>" + users[index].Calls + "</td></tr>").hide();
    $("#tblEveryone").find('tbody').append($newRow);
});

尝试使用 ID 选择器 $("#myid"); 而不是 document.getElementById(); 并尝试一些 jQuery DOM 操作方法,append()prepend()insertAfter() 等。

不是对您问题的具体答案,但希望有一些有用的指导。

【讨论】:

  • 该代码确实有助于缩短我的混合时间。谢谢!哈哈。现在忙于尝试上述建议。我想我已经把自己编码到了死胡同,所以我需要退后几步,修改我所拥有的。
猜你喜欢
  • 1970-01-01
  • 1970-01-01
  • 2018-09-08
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
  • 2021-10-31
  • 1970-01-01
  • 2019-12-09
相关资源
最近更新 更多