CODEWITHSUNDEEP
javascripthtmleventswebdojo
Rice
Rice

Reputation: 3531

Dojo Event dynamically created events not handled

I have the following Dojo Javascript snippet:

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

and the following 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>

The goal here is, when AddLevelButton is clicked it dynamically creates a row in the table with the necessary information and a new button for each row. Note that the HTML and Javascript are largely simplified to illustrate my problem. I did not include all of the row logic that occurs in addLevelButtonClickHandler() method. The HTMl is built as intended, as you can see in the following screenshot:ButtonTable

The problem is that everytime I add a button, only the last button's event listeners work, i.e. in the case of the screenshot the button circled in red logs: Hello there, you called the remove handler [object MouseEvent], and the previous button in the table no longer can be clicked and catch the necessary event. Sorry if the code is a gross-simplification of my goal, I appreciate any help that is offered.

*********EDIT**************

So I took a different approach and placed only 1 button total, and delete level by level from the bottom up. As long as it resides outside of a <table> it functions..Which brings me to the conclusion of NEVER PUT DIJITS OR BUTTONS IN A TABLE After many hours lost, I would recommend if you absolutely need a table in the first place, just placing the button next to the table as necessary using CSS and floats I will leave this question as unanswered until someone may be able to offer an explanation of why the inner table approach does not work.

Upvotes: 1

Views: 421

Answers (1)

T Kambi
T Kambi

Reputation: 1387

While working with dojo. You should never use node.innerHTML to add or update nodes. It will basically convert all the dijits into HTML string and parse as regular HTML by the browser. which in turn will destroy dom object and event associated to it.

Instead create dom object using dojo/dom-construct and add it with appendChild for DOM nodes or addChild in case of container dijits.

Upvotes: 1

Related Questions