javascript - JQuery 点击事件附加到多个元素

Question

我有一个在对话框标题中创建按钮元素的函数。但是，单击事件会附加到所有按钮而不是当前按钮。

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

所有图标和类都有效。但是，单击事件会附加到所有按钮而不是一个按钮。因此，如果我有多个按钮，则所有按钮的单击事件都将相同。这将是最后一个按钮的点击事件。所以:

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 Clicked”，而第一个按钮应显示“Button1 clicked”。

编辑:由于范围问题，必须使用 $.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...}