附加正文后的 YUI，on('click') 甚至不起作用

Question

您好，我一直在嘗試使用 html 模板和 js 構建我的 DOM，但是我遇到了這段代碼的問題。

 YUI().use(
          'aui-modal',
          'stylesheet',
          'aui-io-request',
          function(Y) {
              var officers;
              Y.io.request('https://demo6120867.mockable.io/cmdOfficers', {
                   method: 'GET',
                   dataType: 'json',
                   on: {
                       success:function() {

                           officers = this.get('responseData').officers;
                           for(var i=0;i<officers.length;i++){
                          var template = Y.one("#officerTemplate")
                           var officerName = template.one("#officerName");
                           var officerDepartment = template.one("#department");
                           var officerId;
                           officerName.set('innerText',officers[i].officerName);

                           officerDepartment.set('innerText',officers[i].department);
                           var buttonHolder = template.one("#action_buttons")
                           var officerButtons = buttonHolder.all(".hp");

                           console.log("Officer Buttons")
                           console.log(officerButtons[0]);
                           console.log("Officer Buttons all");
                           console.log(officerButtons);
                           officerButtons.each(function(buttonNode,index){
                               console.log(buttonNode);
                               officerId = officers[i].id;
                               var data = buttonNode.getData("id");
                               // This will not get store in dom.
                               buttonNode.setData("id",i+"_"+index);
                               buttonNode.setData("officer_id",officerId);
                               console.log(buttonNode.getData("id"));
                           });
                           var bodyNode = Y.one(document.body);
                           var newItem = Y.Node.create(template.getContent()).setStyle("display","block");;
                           newItem.set('id','officer_'+i);
                           bodyNode.append(newItem);
                           // when we have template we can insert our data and append to dom.
                           }
                        }
                   }
             });

您看到的最后一行代碼是附加正文，所以我在打電話時期待

 Y.all(".hp").on("click",function(e){
                 console.log("clicked");

單擊功能不起作用，我該如何解決此問題。

謝謝。

Answer 1

看起來這可能是事件委托的完美案例。 因為在綁定事件時，問題中的元素還不在DOM 。

Y.one(document.body).delegate("click", function(e) {
                 console.log("clicked");
                }, ".hp");

文檔正文可以替換為最接近的包含.hp元素的父元素。

https://davidwalsh.name/event-delegate