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