在第一次点击事件后点击事件不起作用。答案

【问题标题】：on click event not working after first on click event.在第一次点击事件后点击事件不起作用。
【发布时间】：2016-03-07 19:42:48
【问题描述】：

我是 jquery 的新手。我有一个页面，其中有两个按钮。其中一个是编辑按钮，另一个是删除按钮。当我单击编辑按钮时，它会删除这两个按钮并在同一个位置（删除和编辑按钮之前的位置）我添加三个元素，其中一个是“保存”按钮。这个保存按钮有一个类 - “save-btn”。我通过 jquery 类选择器选择了这个按钮。并且 onclick 它应该做一些事情。但是当我点击什么都没有发生。任何人都可以提出问题并给出解决方案。提前致谢。

<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>

【问题讨论】：

我认为该类在文档准备期间没有与 jQuery 绑定。为了让它工作，试试这个。 $(document).on('click', '.save-btn', function() { alert("asnlas"); });而不是 $(".save-btn").click(function(){alert("asnlas");});

标签： javascript jquery html

【解决方案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");
     });
});

});

【讨论】：