单击处理程序在内容脚本中不起作用

Question

我通过 chrome 扩展内容脚本将以下代码 运行。我无法让点击处理程序工作。通过 manifest.json 中的 run_at 标志，脚本在 document_end 运行。有什么想法吗？

$(document).ready(function () {
  var enabled = true;

  $('body').append("<button id='#alarmButton'>Disable Alarm</button>");

  $('#alarmButton').on('click', function () {
    console.log('clicked');
    if (enabled == true) {
      enabled = false;
      $('#alarmButton').text('Enable Alarm');
    } else {
      enabled = true;
      $('#alarmButton').text('Disable Alarm');
    }
  });
});

Answer 1

您可以在创建时将点击事件绑定到按钮，然后再附加到文档。这应该有效：

$(document).ready(function() {
  var enabled = true;    
  $("<button id='#alarmButton'>Disable Alarm</button>")
    .appendTo('body')
    .click(function() {
      console.log('clicked');
      if (enabled == true) {
        enabled = false;
        $('#alarmButton').text('Enable Alarm');
      } else {
        enabled = true;
        $('#alarmButton').text('Disable Alarm');
      }
    });
});

Answer 2

您不需要在您的 id 属性中添加 #。

改变

$('body').append("<button id='#alarmButton'>Disable Alarm</button>");

到

$('body').append("<button id='alarmButton'>Disable Alarm</button>");

点击事件使用：

$('body').on('click', '#alarmButton', function () {})

Jsfiddle