Question

我一直在尝试按照此处的示例添加动态字段，该字段是在按下按钮example时创建的，但无法使其生效。

这是我的javascript文件，我存储在我的静态文件目录中（其他静态文件加载正常，文件名为＆＃39; recipeadd.js＆＃39;）：

$(document).ready(function(){

var next = 1;
$("#b1").click(function(e){
    alert("Hi");
    e.preventDefault();
    var addto = "#field" + next;
    var addRemove = "#field" + (next);
    next = next + 1;
    var newIn = '<input autocomplete="off" class="form-control" id="field' + next + '" name="field' + next + '" type="text">';
    var newInput = $(newIn);
    var removeBtn = '<button id="remove' + (next - 1) + '" class="btn btn-        danger remove-me" >-</button></div><div id="field">';
    var removeButton = $(removeBtn);
    $(addto).after(newInput);
    $(addRemove).after(removeButton);
    $("#field" + next).attr('data-source',$(addto).attr('data-source'));
    $("#count").val(next);

        $("#remove").click(function(e){
            e.preventDefault();
            var fieldNum = this.id.charAt(this.id.length-1);
            var fieldID = "#field" + fieldNum;
            $(this).remove();
            $(fieldID).remove();
        });
    });
    });

以下是我的html标题中的内容，同时加载了js和相关的css文件：

   <!--CSS code for recipeadd-->
   <link href="{% static 'recipes/css/recipeadd.css' %}" rel="stylesheet">
   <!--JS code for reccipeadd-->
   <script src="{% static 'recipes/js/recipeadd.js' %}"></script>

最后，这是包含按钮＆＃39; b1＆＃39;的容器，我试图执行javascript：

<div class="container">
<div class="form-group">
    <!--div class="col-xs-4"-->
    <label for="recipeName">Recipe Name</label>
    <input type="text" class="form-control" id="recipeName">
</div>
<div class="form-group">
    <input type="hidden" name="count" value="1" />
    <div class="control-group" id="fields">
        <label class="control-label" for="field1">Ingredients</label>
        <div class="controls" id="profs">
            <form class="input-append">
                <div id="field"><input autocomplete="off" class="form-control" id="field1" name="prof1" type="text" placeholder="Enter one ingredient per line" data-items="8"/><button id="b1" class="btn add-more" type="button">+</button></div>
            </form>
        </div>
    </div>
</div>
<div class="form-group">
    <label for="directions">Directions</label>
    <textarea class="form-control" rows="5" id="directions"></textarea>
</div>

我正在自学Web开发并使用Django框架来完成这个项目。真诚地感谢任何帮助。

Answer 1

首先我假设你在页面上有jQuery，你的代码没有显示jQuery引用。

现在假设代码添加了元素，我看到添加点击事件的一个问题。您可以在移除按钮上为ID添加一个数字：id="remove' + (next - 1) + '"

现在，当您附加活动时，您不使用数字：$("#remove").click(

所以要么你需要使用数字OR，你已经引用了按钮元素，使用它。

removeButton.click( function(){ });

Answer 2

正如我所提到的，我只是在学习。我的html文件中没有jQuery引用。我假设只要我有足够好的javascript文件引用。我下载了jQuery并添加了以下参考，现在正在工作 - 谢谢！

Base64.encode64(document.file.read)

按钮单击不会调用javascript文件

2 个答案: