JQuery單擊事件附加到多個元素

Question

我有一個函數可以在對話框標題中創建按鈕元素。但是，click事件會附加到所有按鈕而不是當前按鈕。

_createTitlebarButtons : function(){ 
    for (var each in this.options.titlebarButtons) { 
     var self = this, 
      props = this.options.titlebarButtons[each]; 


     if (!props.icon){ props.icon = ""} 
     if (!props.name){ props.name = "button-"+each.toString()} 
     if (!props.click){ props.click = function(){} } 
     if (!props.text){ props.text = "" } 

     var curButton = $("<button type='button' id='btn-"+each+"' ></button>").button({ 
       type: "button", 
       label: $("<a>").text(props.text).html(), 
       icon: props.icon, 
       showLabel: false 
      }) 
      .attr("name", props.name) 
      .css("right", 3+22*(Number(each)+1)) 
      .appendTo(this.uiDialogTitlebar) 
      .on("click", function(event) { 
         event.preventDefault(); 
         props.click.apply(self.element[ 0 ], arguments); 
        }); 

     this._addClass(curButton, "ui-dialog-titlebar-close"); 
    } 
}, 

所有圖標和類都可以工作。但是，click事件會附加到所有按鈕而不是一個按鈕。所以如果我有多個按鈕，點擊事件對所有按鈕都是一樣的。它將成爲最後一個按鈕的點擊事件。所以：

titlebarButtons : [ 
     { 
      name: "button1", 
      text: "tooltip", 
      icon: "ui-icon-heart", 
      click:function(){ 
       console.log("Button1 Clicked"); 
       console.log(this); 
      } 
     }, 
     { 
      name: "button2", 
      text: "tooltip", 
      icon: "ui-icon-close", 
      click:function(){ 
       console.log("Button2 Clicked"); 
       console.log(this); 
      } 
     } 
    ] 

將創建2個按鈕，但點擊時他們都將說：「Button2的被點擊的」，而第一個應該說「Button1的點擊」。

編輯：由於範圍問題，不得不使用$ .each而不是for循環。

$.each(this.options.titlebarButtons, function(index){ 
     console.log(this); 

     var props = this; 

     if (!props.icon){ props.icon = ""} 
     if (!props.name){ props.name = "button-"+index} 
     if (!props.click){ props.click = function(){} } 
     if (!props.text){ props.text = "" } 

     var curButton = $("<button type='button' ></button>").button({ 
       type: "button", 
       label: $("<a>").text(props.text).html(), 
       icon: props.icon, 
       showLabel: false 
      }) 
      .attr("name", props.name) 
      .css("right", 3+22*(Number(index)+1)) 
      .appendTo(self.uiDialogTitlebar) 
      .on("click", function(event) { 
         event.preventDefault(); 
         props.click.apply(self.element[ 0 ], arguments); 
        }); 


     self._addClass(curButton, "ui-dialog-titlebar-close"); 
    }) 

Answer 1

創建下面的例子：https://jsfiddle.net/Twisty/ookwg8bq/

jQuery的

$(function() { 
    var uiDialog = { 
    options: { 
     titlebarButtons: [{ 
     name: "button1", 
     text: "tooltip", 
     icon: "ui-icon-heart", 
     click: function() { 
      console.log("Button1 Clicked"); 
      console.log(this); 
     } 
     }, { 
     name: "button2", 
     text: "tooltip", 
     icon: "ui-icon-close", 
     click: function() { 
      console.log("Button2 Clicked"); 
      console.log(this); 
     } 
     }] 
    }, 
    uiDialogTitlebar: "#uiDialogTitlebar", 
    _createTitlebarButtons: function() { 
     var self = this; 
     $.each(self.options.titlebarButtons, function(ind, elem) { 
     var props = self.options.titlebarButtons[ind]; 

     if (!props.icon) { 
      props.icon = "" 
     } 
     if (!props.name) { 
      props.name = "button-" + ind 
     } 
     if (!props.click) { 
      props.click = function() {} 
     } 
     if (!props.text) { 
      props.text = "" 
     } 

     var curButton = $("<button>", { 
      type: 'button', 
      id: 'btn-' + ind, 
      name: props.name, 
      class: "ui-dialog-titlebar-close" 
      }).button({ 
      type: "button", 
      label: props.text, 
      icon: props.icon, 
      showLabel: false 
      }) 
      .css("right", 3 + 22 * (ind + 1)) 
      .appendTo(self.uiDialogTitlebar) 
      .click(function(event) { 
      event.preventDefault(); 
      props.click.apply(elem, []); 
      }); 
     }); 
    } 
    }; 

    uiDialog._createTitlebarButtons(); 

}); 

這將創建兩個按鈕，您可以點擊每個按鈕。由於right造型，它們有重疊之處。我得到了Firefox中的結果如下W/Firebug的控制檯：

Button1 Clicked 
/_display/ (line 73) 
Object { name="button1", text="tooltip", icon="ui-icon-heart", more...} 
/_display/ (line 74) 
Button2 Clicked 
/_display/ (line 81) 
Object { name="button2", text="tooltip", icon="ui-icon-close", more...} 

Answer 2

// trigger event when click on a button 
$('button').on('click', function() { 
    _createTitlebarButtons($(this)); 
}; 

// function called by the event 
function _createTitlebarButtons(button) { 
    // List all the actions that affect only the button you want to refer to it as "button". i.e: 
    button._addClass(curButton, "ui-dialog-titlebar-close"); 
};