Question

我正在使用jQuery动态创建按钮：

function createRefreshButton() {
  var $btn = $('<button/>', {
    text: 'Refresh Data',
    id: 'btn_refresh'
  });

  $($btn).on('click', function () {
    ClickRefresh()
  });

  return $btn;
}

我想知道是否可以将此代码更改为以下内容：

function createRefreshButton() {
  var $btn = $('<button/>', {
    text: 'Refresh Data',
    id: 'btn_refresh',
    onclick: 'ClickRefresh()'
  });
  return $btn;
}

但是当我单击具有该语法的按钮时没有任何反应。这是由于我建议的代码中的错误还是根本不可能？提前谢谢。

Answer 1

您可以设置对象的click属性，而不是onclick，并为其提供ClickRefresh函数的引用。试试这个：

function createRefreshButton() {
    return $('<button/>', {
        text: 'Refresh Data',
        id: 'btn_refresh',
        click: ClickRefresh
    });
}

Working example

Answer 2

可能，但你需要改变它的方式，jQuery喜欢：

function createRefreshButton() {
    var $btn = $('<button/>', {
        type: 'button',
        text: 'Refresh Data',
        id: 'btn_refresh'
    }).click(ClickRefresh);
    return $btn;
}

您应该使用.append()或类似内容插入返回的值。它在这里工作得非常好：

$(function () {
  function ClickRefresh() {
    console.log("Clicked Refresh");
    $("body").append("<br>Clicked Refresh");
  }
  function createRefreshButton() {
    var $btn = $('<button />', {
      type: 'button',
      text: 'Refresh Data',
      id: 'btn_refresh'
    }).click(ClickRefresh);
    return $btn;
  }
  $("body").append(createRefreshButton());
});

<script src="https://code.jquery.com/jquery-1.11.3.js"></script>

Answer 3

只需使用附加到不变的祖先的委托事件处理程序。这将适用于动态添加的内容，因为选择器在事件时间（而不是事件注册时间）运行

    $(document).on('click', 'button', ClickRefresh);

添加按钮就是这样：

function createRefreshButton()
{
    var $btn = $('<button/>', {
        text: 'Refresh Data',
        id: 'btn_refresh'
    });
    return $btn;
}

注意：ID需要在页面上是唯一的，因此如果您想支持倍数，您应该将这些按钮与页面上的任何其他按钮区分开，例如使用课程：

$(document).on('click', '.mybutton', ClickRefresh);

function createRefreshButton()
{
    var $btn = $('<button/>', {
        'class': 'mybutton',
        text: 'Refresh Data',
    });
    return $btn;
}

JSFiddle： https://jsfiddle.net/ubmo441a/

Answer 4

通常我喜欢这样：

function createRefreshButton() {
  // Create button
  var $button = $('<button class="btn_refresh">Refresh Data</button>');

  // Append it
  $('body').append($button);

  // Event for this button 
  $button.on('click',function(){
    alert('Refresh');
  });
}

createRefreshButton();
createRefreshButton();

如果不只是一个

，请不要使用id

PS：如果你对这些按钮有相同的功能，那么：

$(document).on('click','.btn_refresh',function(){
   alert('Refresh');
});

..在createRefreshButton()

之外

演示： https://jsfiddle.net/l2aelba/xqj9ycLk/1/

使用jQuery动态创建按钮

4 个答案: