Доступ к динамически генерируемому контенту в jquery - PullRequest
Новая
       28

Доступ к динамически генерируемому контенту в jquery

3 голосов
/ 26 января 2012

Я только недавно узнал, как 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;
   });
});

Дело в том (строка, помеченная <---- выше, второй блок), <strong>row.style.display ,правильно запускает элементы, для которых видимость отсутствует, но последняя строка, $ (". BeforeHover_Clean"). show (); , очевидно, не будет работать, поскольку содержимое является динамическим. Есть ли способ манипулировать делегатом или какой-либо другой функцией jquery, чтобы снова отображать элементы, когда это необходимо?

На этом уровне я ничего не понимаю.Привязка событий "click" к родителю так же хороша, как и я!лол.Я чувствую себя как Чарльз Бэббидж сейчас!;)

1 Ответ

2 голосов
/ 26 января 2012

Тот факт, что он динамический, не должен иметь значения.

У вас довольно странное сочетание 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);
});

Попробуйте использовать селектор идентификаторов $("#myid"); вместо document.getElementById();, а также поэкспериментируйте с некоторыми методами манипулирования DOM jQuery, append(), prepend(), insertAfter() и т. Д.

Не конкретный ответ на ваш вопрос, но, надеюсь, некоторые полезные рекомендации.

...