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

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

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

改变

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

到

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

对于点击事件使用:

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

Jsfiddle