jquery 函数不作为事件处理程序工作

Question

谁能告诉我为什么这个功能不起作用？

for(var i=1;i<=12;i++)
{
  var btn=$('<div>Button</div>').attr('id', 'id_'+i).button();
  btn.css('margin','10px').on('click', showId());
  btn.appendTo($('#buttons'));    
}

function showId(){
   alert($(this).attr('id'))
}

Answer 1

您想要传递该函数，而不是运行它:

btn.css('margin','10px').on('click', showId);

<小时/>

顺便说一句，您还应该缓存您的 $('#buttons')，并使用事件委托(delegate):

var buttons = $('#buttons').on('click', '.ui-button', showId);

for (var i=1; i <= 12; i++)
{
  $('<div>Button</div>')
      .attr('id', 'id_'+i)
      .button()
      .css('margin', '10px')
      .appendTo( buttons );    
}

function showId()
{
   alert( this.id );
}

还有一些需要考虑的事情:

• 将 CSS 移至样式表
• 一次性将所有按钮附加到 DOM