Question

我是jquery的新手。我有一个页面，我有两个按钮。其中一个是编辑按钮，另一个是删除按钮。当我点击编辑按钮时，它会删除这两个按钮并在同一个地方（删除和编辑按钮之前的位置）我添加了三个元素，其中一个是＆＃34;保存＆＃34;按钮。这个保存按钮有一个类 - ＆＃34; save-btn＆＃34;。我通过jquery类选择器选择此按钮。并点击它应该做点什么。但是，当我点击没有任何反应。任何人都可以提出错误并给出解决方案。提前谢谢。

<div class="container-fluid">
<div class="row">
  <div class="col-md-2 "></div>

    <div class="col-md-4 ">
        <div class="form-tile">
            <form action="" method="post">{% csrf_token %}
            {% crispy form %}
            </form>
        </div>
    </div>
    <div class="col-md-4 tile">
        <div class="row">
           <div class="col-md-12">
               <h2 style="margin-top: 0px;padding-top: 0px;text-align: center">Today's Purchase</h2>
           </div>
        </div>
        <div class="row">
            <table class="table table-hover">
                <thead>
                <tr>
                    <th>Item</th>
                    <th>Price</th>
                    <th>Actions</th>
                </tr>
                </thead>
                <tbody>
                {% for item in items %}
                <tr>
                  <td>{{ item.name }}</td>
                    <td>{{ item.price }}</td>
                    <td><button class="btn btn-primary edit-btn"><i class="fa fa-pencil-square-o"></i></button>
                    <button class="btn btn-danger delete-btn"><i class="fa fa-trash"></i></button>
                    </td>
                </tr>
                {% endfor %}
                </tbody>
            </table>
        </div>

    </div>
  <div class="col-md-2 "></div>
</div>

这是我的javascript

    <script>
$(function(){
    $(".edit-btn").click(function(){
        var custom_form = '<td><input type="text" size="10"></td><td><input type="text" size="10"></td> <td><button class="btn btn-primary save-btn">Save</i></button> </td>'
        var parent = $(this).parent().parent().html(custom_form);
    });

   $(".save-btn").click(function(){
        alert("asnlas");
    });

});
</script>

Answer 1

创建元素时，必须同时分配事件

试试这个......

$(function(){
$(".edit-btn").click(function(){
    var custom_form = '<td><input type="text" size="10"></td><td><input type="text" size="10"></td> <td><button class="btn btn-primary save-btn">Save</i></button> </td>'
    var parent = $(this).parent().parent().html(custom_form);

     $(".save-btn").click(function(){
         alert("asnlas");
     });
});

});

单击事件后第一次单击事件不起作用。

1 个答案: