Присоединение события rowSelect к динамически созданной сетке DHTMLX

Я работаю с DHTMLX Grid и создаю несколько объектов сетки, используя такой метод, как

JS:

function renderGrid(render_area, dataURL, skin, loop_index) {
    var scope = this;
    var grid_obj = loop_index + '_grid';
    grid_obj = new dhtmlXGridObject($(render_area).attr('id'));
    grid_obj.selMultiRows = true;
    grid_obj.imgURL = "codebase/imgs/";
    grid_obj.init();
    grid_obj.setSkin(skin);
    grid_obj.load(dataURL);
}

Я делаю это с помощью плагина jquery. Теперь я хочу прикрепить событие RowSelect ко всем этим динамически создаваемым сеткам.

Я думал сделать это, используя объект сетки на HTML-странице и прикрепив туда событие вот так 0_grid.attachEvent("onRowSelect",scope.clickEvent);

но, к сожалению, я не могу получить эти динамически созданные объекты сетки на странице HTML (0_grid не определен на странице HTML).

Рад, если кто-то может предложить мне хорошее решение


person Hitesh    schedule 11.11.2013    source источник
comment
просто добавьте в функцию renderGrid строку grid_obj.attachEvent(onRowSelect,scope.clickEvent); вам не нужно имя, чтобы прикрепить событие, только объект, который у вас уже есть   -  person user2844810    schedule 12.11.2013


Ответы (2)


Вы можете использовать метод jquery .on для присоединения событий к динамически создаваемым элементам. Вам нужно будет прикрепить событие к статическому элементу, который является родителем ваших элементов сетки.

parent.on("event", "selector", "data", handler());
person codeaddict    schedule 11.11.2013
comment
спасибо за ответ. Но этот обработчик будет статическим обработчиком. На самом деле сетка позволяет обработчику на основе идентификатора строки данных. Таким образом, используя указанный выше параметр, я не смог бы выполнить требуемое. - person Hitesh; 11.11.2013

У вас есть 2 варианта: либо прикрепить прослушиватель в renderGrid, либо за его пределами. Я удалил параметр loop_index, так как он вам не нужен:

В пределах:

function renderGrid(render_area, dataURL, skin) {
    var grid_obj = new dhtmlXGridObject($(render_area).attr('id'));

    grid_obj.selMultiRows = true;
    grid_obj.imgURL = 'codebase/imgs/';
    grid_obj.init();
    grid_obj.setSkin(skin);
    grid_obj.load(dataURL);
    grid.attachEvent('onRowSelect', function () {
        // Or instead of an anonymous function you could use this.clickEvent
    });
}

Снаружи (нужно вернуть объект сетки из renderGrid:

function renderGrid(render_area, dataURL, skin) {
    var grid_obj = new dhtmlXGridObject($(render_area).attr('id'));

    grid_obj.selMultiRows = true;
    grid_obj.imgURL = 'codebase/imgs/';
    grid_obj.init();
    grid_obj.setSkin(skin);
    grid_obj.load(dataURL);

    return grid_obj;
}

var grid = renderGrid($('#grid'), '/data.xml', 'dhx_skyblue');
grid.attachEvent('onRowSelect', function () {
    // Or instead of an anonymous function you could use this.clickEvent
});

Если вы хотите подключить прослушиватель событий внутри цикла, я бы рекомендовал прочитать это первый абзац из JavaScript Garden.

person bagonyi    schedule 29.11.2013