Adding event to multiple buttons in Dojo

Question

I'm listing my products like in the following image.

I want to add delete event to my delete buttons.

My product card html creator function looks like this.

        getCardSummaryView: function(card) {
            var html = "";
            html += "</br>";
            html += "<div>";
            html += "<label>Product Name: " + card.Product.Name + "</label></br>";
            html += "<button id='deleteCard" + card.Product.Id + "'>Delete</button>";
            html += "</div>";

            return html;
        }

         array.forEach(response.products, function (item) {
           var view = this.getCardSummaryView(item);
            dom.byId("sideBar").innerHTML += view;

           var node = dom.byId("deleteCard" + item.Id);

           on(node, "click", function (e) {alert("something");})
        }

But if I add 3 product to panel, only last button click is populating, others doesn't work. What am I doing wrong?

Answer 1

I believe the following line is problematic because on each iteration, you're rebuilding the DOM and destroying all the event listeners that you just added.

dom.byId("sideBar").innerHTML += view;

You can simply appendChild instead.

http://jsfiddle.net/rayotte/8uRXe/356/

require([
    "dojo/_base/array"
    , "dojo/dom"
    , "dojo/dom-construct"
    , "dojo/on"
    , "dojo/domReady!"
], function (
    array
    , dom
    , domConstruct
    , on
) {
    var getCardSummaryView = function (product) {
        var html = "";
        html += "<br/>";
        html += "<div>";
        html += "<label>Product Name: " + product.Name + "</label><br/>";
        html += "<button type='button' id='deleteCard" + product.Id + "'>Delete</button>";
        html += "</div>";
       return html;
    }

    var products = [
        {
            Id: 1
            , Name: 'Product 1'
        }    
        ,{
            Id: 2
            , Name: 'Product 2'
        }    
        ,{
            Id: 3
            , Name: 'Product 3'
        }    
    ]
    var sideBarNode = dom.byId("sideBar");
    array.forEach(products, function (product) {
        sideBarNode.appendChild(domConstruct.toDom(getCardSummaryView(product)));
        on(dom.byId("deleteCard" + product.Id), 'click', function(e){
            console.log('testing' + product.Id)
        })
    });
});

Answer 2

If i Where You i would do it this way because while you can see the buttons is created but that doesn't mean you can listen to them at that point so I will attach the buttons after the loop is done.

require(["dojo/_base/array","dijit/form/ValidationTextBox",
         "dijit/form/Button","dojo/dom","dojo/on","dojo/domReady!"], function(array,ValidationTextBox,Button,dom,on){

        var getCardSummaryView = function(card) {
            var html = "";
            html += "</br>";
            html += "<div>";
            html += "<label>Product Name: " + card.Product.Name + "</label></br>";
            html += "<button id='deleteCard" + card.Product.Id + "'>Delete</button>";
            html += "</div>";

            return html;
        }

     var objectvalue = {};
      var arrayvalue = new Array(); 

    objectvalue.Product = {};
    objectvalue.Product.Name = "hello1";            
    objectvalue.Product.Id = "ThisisWhy1";
    arrayvalue.push(objectvalue);
    var test = {};     
    test.Product = {};
    test.Product.Name = "hello2";            
    test.Product.Id = "ThisisWhy2";
    arrayvalue.push(test);


    var test2 = {};     
    test2.Product = {};
    test2.Product.Name = "hello3";            
    test2.Product.Id = "ThisisWhy3";
 arrayvalue.push(test2);


       array.forEach(arrayvalue, function (item) {

           var view = getCardSummaryView(item);
           dom.byId("sideBar").innerHTML += "----------------"
            dom.byId("sideBar").innerHTML += view;

           var node = dom.byId("deleteCard" + item.Product.Id);


        });      


              var myButton = new Button({
        label: "Click me!",
        onClick: function(){
         alert("1");
        }
    }, "deleteCard" + "ThisisWhy1");


              var myButton = new Button({
        label: "Click me!",
        onClick: function(){
       alert("2");
        }
    }, "deleteCard" + "ThisisWhy2");


              var myButton = new Button({
        label: "Click me!",
        onClick: function(){
       alert("3");
        }
    }, "deleteCard" + "ThisisWhy3");

});

ofcourse you can loop through the buttons when creating them but just to elaborate i created three instances Click HERE to see the working in jsfiddle.