Question

我正在为Google Chrome创建文本替换扩展程序，用户可以在其中输入要替换的单词以及要替换它的单词。选项页面应该是动态列表，如上所述，我可以在jsfiddle中添加框，但是当我在chrome中打开选项页面时，它不会添加任何新框或任何内容。

以下是链接：http://jsfiddle.net/3K9jg/4/

也许它与以下内容有关但我真的不知道......

$("#add").click(function(e) {
$("#wordreplacer").append($("#wordreplacer div.input:eq(0)").clone(true));
$("#wordreplacer div.input").eq(-1).find("input").val('');
e.preventDefault();
});

我对javascript很陌生，经过几周的搜索，我仍然无法弄清楚为什么会这样。在此先感谢您的帮助。

Answer 1

请试试下面的代码。

<!DOCTYPE html>
<html>
<head>
  <meta http-equiv="content-type" content="text/html; charset=UTF-8">
  <title> - jsFiddle demo</title>

  <script type='text/javascript' src='/js/lib/dummy.js'></script>



  <link rel="stylesheet" type="text/css" href="/css/result-light.css">

  <style type='text/css'>

  </style>



<script type='text/javascript'>
    window.onload = function () {
        var origList = [];
        var replacementList = [];

        var originalWord = document.getElementById("originalword");
        var replacementWord = document.getElementById("replacementword");
        var messageBox = document.getElementById("wordreplacer");

        function insert() {
            origList.push(originalWord.value);
            replacementList.push(replacementWord.value);
        }

        $("#add").click(function (e) {
            $("#wordreplacer").append($("#wordreplacer div.input:eq(0)").clone(true));
            $("#wordreplacer div.input").eq(-1).find("input").val('');
            e.preventDefault();
        });
    }

</script>


</head>
<body>
  <script class="jsbin" src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
  <script class="jsbin" src="http://ajax.aspnetcdn.com/ajax/jquery.templates/beta1/jquery.tmpl.min.js"></script>
<body>
    <h3>Enter word and its replacement</h3>
    <form id="wordreplacer">
    <div class="input">
        <input id="originalword" type="text" placeholder="Original Word" />
        <input id="replacementword" type="text" placeholder="Replacement Word" />
    </div>
    </form>
        <input type="button" id="add" value="Add" onclick="insert()" />

</body>

</body>


</html>

我可以点击Add按钮添加框。请让我知道这有帮助。

动态列表在jsfiddle中工作但不在chrome中

1 个答案: