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

Question

我是 jquery 的新手。我有一个页面，其中有两个按钮。其中一个是编辑按钮，另一个是删除按钮。当我单击编辑按钮时，它会删除这两个按钮并在同一位置(删除和编辑按钮之前所在的位置)添加三个元素，其中一个是“保存”按钮。这个保存按钮有一个类——“save-btn”。我通过 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");
     });
});

});