Как получить доступ к данным, связанным с элементом, при использовании делегирования событий

Я использую делегирование событий для n-количества строк, мой старый подход связывал каждую строку с событием, код выглядел примерно так:

function getDiv (data) {
    var div = $("<div class='theDiv'>");

    div.click(function () {
        console.log(data);
    });

    return div;
}

function getContainer() {
    var i, container;

    container = $("<div class='container'></div>");
    for (i = 0 ; i < 1000 ; i++) {
        container.append(getDiv(i));
    }
    return container;
}

$("body").append(getContainer());

Примечание. При таком подходе каждый элемент строки (theDiv) имеет доступ к своим данным.

Теперь вопрос в том, что я хочу связать один щелчок по container и получить доступ к данным, подход делегирования событий будет выглядеть так:

function getNewDiv (data) {
    var div = $("<div class='theDiv'>");

    return div;
}

function getNewContainer() {
    var i, container;

    container = $("<div class='container'></div>");
    for (i = 0 ; i < 1000 ; i++) {
        container.append(getNewDiv(i));
    }

    container.click (function (e) {
        var targetElem = e.target;
        console.dir(e);
        if ($(targetElem).hasClass("theDiv")) {
            console.log("row was clicked");
        }
    })

    return container;
}

$("body").append(getNewContainer());

Теперь, как получить доступ к данным, связанным с каждой строкой?

Согласно моему обучению: я могу добавить данные в

  • data-*, но это ограничило бы меня простым типом данных
  • $.data, связанный с элементом

Есть ли другой способ сделать это?


javascript performance dom-events event-delegation
person Community    schedule 15.02.2013    source источник

Ответы (2)


arrow_upward
0
arrow_downward

.on позволяет вам делегировать события:

container.on('click', '.theDiv', function () {
    //`this` is `.theDiv`.
});
person Explosion Pills    schedule 15.02.2013

arrow_upward
0
arrow_downward

Вы можете использовать $.data() внутри getNewDiv() для хранения ссылочного индекса:

function getNewDiv (dataIndex) {
    return $("<div class='theDiv'>").data('idx', dataIndex);
}

Затем используйте переменную индекса данных каждого элемента для ссылки на объект в большом массиве данных:

var mydata = [{ ... }, { ... }, { ... }];

container.on('click', '.theDiv', function () {
    var data = mydata[$(this).data('idx')];
    console.log("row was clicked");
});
person Ja͢ck    schedule 15.02.2013
comment
Любым другим путем? Я думал не использовать $.data или data-*, ну $.data более элегантно, но все же :) - person ; 15.02.2013
comment
@dilliwal данные, которые вы храните в каждом, могут быть просто индексом массива объектов, на которые можно ссылаться из обработчика одного клика. - person Ja͢ck; 15.02.2013
comment
@AbhishekDilliwal Я обновил свой ответ, чтобы привести пример того, как вы можете хранить данные в центре. - person Ja͢ck; 15.02.2013
comment
Спасибо, Джек, даже я думал так же, единственная проблема в том, что мне нужно отслеживать массив данных при удалении элементов dom. лучше хранить это в $.data, так как когда мы используем remove jQuery, он также удаляет данные. - person ; 15.02.2013
comment
@AbhishekDilliwal Да, я, очевидно, не учел удаление узлов :) - person Ja͢ck; 15.02.2013