將事件添加到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;

您可以直接添加appendChild。

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

});

當然，您可以在創建按鈕時遍歷按鈕，但為便於闡述，我創建了三個實例單擊此處以查看jsfiddle中的工作。