Question

我想在按下编辑按钮时创建一个输入并保存值按钮。然后使用创建的保存按钮将输入保存在chrome存储中。但是，当我尝试按新创建的按钮时，没有任何反应。控制台中没有任何内容。我也尝试过警报。

HTML

<div id="area"><button id="edit"><img src="img/edit.png" height="12" width="12" align="center"></button>

JavaScript

$("#edit").click(function(e)
    {
        $('#area').append('<input name="theinput" id="theinput" type="text" size="12" placeholder="input">')
        $("#edit" ).remove();
        $('#area').append('<button id="save"><img src="img/save.png" height="12" width="12" align="center"></button>')
});

$('#save').click(function(e)
{
    var value = document.getElementById('theinput').value;
    chrome.storage.sync.set({'variable': value}, function(){
        console.log("Saved!")
    });
});

Answer 1

在页面上存在div #save之前，将设置#save单击处理程序，因为在#edit上单击按钮将创建#save按钮。您的#save点击事件没有任何约束。您希望#save在加载时出现在页面上，但希望它不可见。您应该使用css隐藏和显示它。像这样的东西。

将保存按钮添加到HTML

<div id="area">
  <button id="edit" class="visible">
    <img src="img/edit.png" height="12" width="12" align="center">
  </button>
  <button id="save" class="hidden"><img src="img/save.png" height="12" width="12" align="center"></button>
</div>

然后使用一些JavaScript来切换类

$("#edit").click(function(e){
  $(this).removeClass('visible').addClass('hidden');
  $('#save').removeClass('hidden').addClass('visible');
}

当然还有CSS类

.hidden {
  display: none;
}

.visible {
  display: block;
}

Answer 2

即使我不完全了解您想要什么，在创建保存按钮时，该按钮的Jquery代码也未与任何侦听器绑定。由于您说的是在$（'＃save'）。click（）内时在控制台中看不到任何内容，因此可以使用.on（）函数，它是.click（）、. change的简写形式（）功能，但可以更直接地处理您的问题。

    $(document).on('click','#save',function(){
        var value = document.getElementById('theinput').value;
        chrome.storage.sync.set({'variable': value}, function(){
        console.log("Saved!");
      });
    });

注意：不要忘记在$（document）.ready（）函数中使用所有JQuery代码。

通过创建按钮将数据保存到Chrome存储

2 个答案: