Question

我一直在打破这个问题，为什么它不能正常运作。

我正在使用.after方法创建一个新的表行，如下所示：

             $('#milestone_add_final').submit(function(event){
                    if (($('#milestone_date').eq(0).val().length == 0) || ($('#milestone_description').eq(0).val().length) == 0) { alert("You forgot to enter a value!"); return false; } 
                    $.blockUI();
                    event.preventDefault();
                    var values = $(this).serialize();
                        $.ajax({
                          url: "submit.php",
                          type: "post",
                          data: values,
                          success: function(response){
                               var json = $.parseJSON(response);
                               $('.milestones tr:first').after("<tr id=\""+json.milestone_id+"\"><td class=\"date smallest\">"+json.milestone_date+"</td><td class=\"description edit_input\" id=\""+json.milestone_id+"\">"+json.milestone_description+"</td><td class=\"action smallest\"><a class=\"delete\" href=\"#\">x</a></td></tr>");
                               $('#milestone_date').val('').blur();
                               $('#milestone_description').val('').blur();
                          },
                          error:function(){
                              alert(failure);
                          }   
                    }); 
             });

除了已在html代码中配置的硬编码：

            <table id="milestones">
            <tr><th class="date"><form id="milestone_add_final" method="post"><input type="text" name="milestone_date" id="milestone_date" placeholder="Date"></th><th class="description"><input type="text" name="milestone_description" id="milestone_description" placeholder="Description"></th><th class="action"><button type="submit">+</button><input type="hidden" name="action" value="milestone_add_final"></form></th></tr>
            <tr id="2"><td class="date smallest">22/02/13</td><td class="description edit_input" id="todo_description_153">qfhds sqkjf lhfsjlsqf hjlksqj</td><td class="action  smallest"><a href="#" class="delete">x</a></td></tr>
            <tr id="4"><td class="date smallest">22/02/13</td><td class="description edit_input" id="todo_description_153">xxxxx</td><td class="action  smallest"><a href="#" class="delete">x</a></td></tr>
            </table>

当我尝试删除已存在的表行时，它工作正常 - 但是当我尝试使用动态添加的表（通过jQuery）时，它不起作用。我不知道为什么它不起作用。

            $('table#milestones td a.delete').on('click', function()
                    {
                        if (confirm("Are you sure you want to delete this milestone?"))
                        {
                            var id = $(this).parent().parent().attr('id');
                            var data = 'milestone=' + id  + '&action=milestone_delete_final';
                            var parent = $(this).parent().parent();

                            $.ajax(
                            {
                                   type: "POST",
                                   url: "delete.php",
                                   data: data,
                                   cache: false,

                                   success: function()
                                   {
                                        parent.remove();
                                                               }
                             });                
                        }
                    });

Answer 1

动态添加的元素必须通过静态父元素将其事件委托给它们。

更改一行代码将解决此问题。

$('table#milestones td a.delete').on('click', function()

要

$('table#milestones').on('click', 'td a.delete', function()

Answer 2

您需要事件委派 -

 $('#milestones').on('click','a.delete', function(){

http://api.jquery.com/on/

使用ajax删除动态创建的表行

2 个答案: