Блог

У меня есть следующий фрагмент Javascript Dojo:

 postCreate: function () {
    this.inherited(arguments);
    var hitchWidgetToaddLevelButtonClickHandler = DojoBaseLang.hitch(this, addLevelButtonClickHandler);
    DojoOn(this.AddLevelButton, "click", hitchWidgetToaddLevelButtonClickHandler);

    function addLevelButtonClickHandler() {
                hierarchyLevelNumber  = 1;
                var myButton = new Button({
                    label: "Click me!",
                    id: "level_button_"   hierarchyLevelNumber,
                    onClick: function(){
                        // Do something:
                        console.log("Hello there, ");
                    }
                }).placeAt(someNode,"last").startup();

                    var registeredRemovalButton = DijitRegistry.byId(("level_button_"   hierarchyLevelNumber));
                    DojoOn(registeredRemovalButton, "click", function someFunction() {
                        console.log("how are you?");
                    });
    }
}
  

и следующий HTML

 <div id="settingsBorderContainer" data-dojo-type="dijit/layout/BorderContainer" data-dojo-props="design:'headline', gutters:false, region:'top'" class="${theme}">

    <table data-dojo-attach-point="HierarchyLevelsTable">
        <tr>
            <th>Level</th>
            <th> Table Name </th>
            <th> Column Name</th>
        </tr>
        <td id="someNode">
        </td>
    </table>
</div>
  

Цель здесь в том, чтобы при нажатии кнопки AddLevelButton динамически создавалась строка в таблице с необходимой информацией и новой кнопкой для каждой строки. Обратите внимание, что HTML и Javascript в значительной степени упрощены, чтобы проиллюстрировать мою проблему. Я не включил всю логику строк, которая встречается в addLevelButtonClickHandler() методе. HTML создан по назначению, как вы можете видеть на следующем скриншоте:

Проблема в том, что каждый раз, когда я добавляю кнопку, работают только прослушиватели событий последней кнопки, т.Е. в случае со скриншотом кнопка обведена красным logs: Hello there, you called the remove handler [object MouseEvent] , а предыдущую кнопку в таблице больше нельзя щелкнуть и перехватить необходимое событие. Извините, если код является грубым упрощением моей цели, я ценю любую предлагаемую помощь.

********* РЕДАКТИРОВАТЬ**************

Поэтому я выбрал другой подход и разместил всего 1 кнопку и удалял уровень за уровнем снизу вверх. Пока оно находится за пределами <table> , оно функционирует..Что подводит меня к выводу о том, что НИКОГДА НЕ ПОМЕЩАЙТЕ DIJITS ИЛИ КНОПКИ В ТАБЛИЦУ После многих потерянных часов, я бы рекомендовал, если вам абсолютно необходима таблица в первую очередь, просто разместить кнопку рядом с таблицей по мере необходимости, используя CSS и floats Я оставлю этот вопрос без ответа, пока кто-нибудь не сможет предложить объяснение, почему подход с внутренней таблицей не работает.

Во время работы с dojo. Вы никогда не должны использовать node.innerHTML для добавления или обновления узлов. В основном это преобразует все dijits в HTML-строку и анализирует браузер как обычный HTML. что, в свою очередь, уничтожит объект dom и событие, связанное с ним.

Вместо этого создайте dom-объект с помощью dojo/dom-construct и добавьте его с помощью appendChild для DOM-узлов или addChild в случае dijits контейнера.