将事件添加到Dojo中的多个按钮

Question

我正在列出我的产品，如下图所示。

我想在删除按钮中添加删除事件。

我的产品卡html创建者功能如下所示。

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

但是，如果我将3个产品添加到面板，则仅填充最后一个按钮，其他按钮不起作用。 我做错了什么？

Answer 1

我认为以下行存在问题，因为在每次迭代中，您都在重建DOM并销毁刚刚添加的所有事件侦听器。

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

你可以简单地追加孩子。

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

如果我在哪里我会这样做，因为虽然您可以看到按钮已创建，但这并不意味着您可以在那时听它们，所以我会在循环完成后附加按钮。

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

});

当然，你可以在创建它们时循环浏览按钮，但只是为了详细说明我创建了三个实例 点击HERE查看在jsfiddle中的工作情况。