在jquery中访问动态生成的内容

I've just recently learned how jquery can access dynamically generated content, by placing a "bubble" around its parent object (or first available parent that is not dynamic), and then telling it how to handle an event from within it etc.

我刚刚学会了jquery如何访问动态生成的内容，方法是在其父对象周围放置一个“气泡”（或者第一个非动态的可用父级），然后告诉它如何处理它内部的事件等。

I have a table (static) and rows are dynamically added.

我有一个表（静态），动态添加行。

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

and the code that adds the rows:

以及添加行的代码：

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

then the code i use to "bind" click events on each row

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

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

The thing is (line marked with <---- above, second block), row.style.display, correctly starts off the items with none as visibility, but the last line, $(".BeforeHover_Clean").show(); obviously wont work as the content is dynamic. Is there a way to manipulate the delegate, or some other jquery feature, to set the items visible again when needed?

事情是（标有<---- above，second block）的行，row.style.display，正确地从没有作为可见性的项开始，但是最后一行，$（“。BeforeHover_Clean”）。show（） ;显然不会工作，因为内容是动态的。有没有办法操纵委托或其他一些jquery功能，在需要时再次设置项目可见？

I am clueless at this level. Binding "click" events to the parent is as good as i got! lol. I feel like charles babbage now! ;)

我在这个层面上一无所知。将“点击”事件绑定到父母就像我一样好！大声笑。我现在觉得像查尔斯巴贝奇！ ;）

1 个解决方案

#1

The fact that it is dynamic shouldn't matter.

它是动态的这一事实无关紧要。

You hae a rather strange mix of jQuery and DOM JavaScript whjich probably isn't helping, and is also bloating your code substantially.

你有一个相当奇怪的混合jQuery和DOM JavaScript，可能没有帮助，并且还大大增加了你的代码。

For example, your each loop can be condensed as follows:

例如，您的每个循环可以压缩如下：

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

Try using the ID selector $("#myid"); instead of document.getElementById(); and also playing around with some of the jQuery DOM manipulation methods, append(), prepend(), insertAfter(), etc.

尝试使用ID选择器$（“＃myid”）;而不是document.getElementById（）;并且还使用了一些jQuery DOM操作方法，append（），prepend（），insertAfter（）等。

Not a specific answer to your question, but hopefully some helpful guidelines.

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

#1