vendredi 21 octobre 2016

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.




Aucun commentaire:

Enregistrer un commentaire