在引导模式中的 Ajax 调用后按钮单击不起作用

Question

按钮在引导模式中的 ajax 调用之前工作。 但是Ajax调用后点击事件不起作用。

function book_appointment_timeslot(job_id,planner_date,time_slot,contract_id){    
       $.ajax({
                  type: "POST",
                  url: "/add_appointment_planner",
                  data: { contract_id: contract_id,job_id : job_id,  planner_date: planner_date, time_slot: time_slot, _token: CSRF_TOKEN },  
                  success: function(data){
                         if(data['status']=='success')
                         {
                                show_notification(data['status'],data['message']);
                                $("#apt_status_table").load(location.href + " #apt_status_table");
                                $(".tbl_planner_list_whole").load(location.href + " .tbl_planner_list_whole");

                         }
                  }
    });
}

我尝试了以下解决方案，

解决方案-1：-

$(document).on('click', '.appointment_edit_button', function(){
    alert("success");
});

解决方案2：-

$(document).delegate('click', '.appointment_edit_button', function(){
    alert("success");
});

我也试过unbind()。它也不起作用。 当我将脚本直接放在控制台中时。然后它的工作。所以可能是由于引导模式。

所以，我想在引导模式中调用 ajax 后启用按钮单击事件。

编辑：-

HTML 代码：-

<tbody>
    <tr>
                            <td>
                                <div class="agenda-date">
                                    <div class="dayofmonth color_font_date">2017-06-01</div>
                                    <div class="dayofweek">
                                        thursday                                            </div>
                                </div>
                            </td>
                            <td>
                                <div class="row margin_two_planner">
                                        <button type="button" class="btn btn-sm btn-primary" onclick="book_appointment_timeslot(19,&quot;2017-06-01&quot;,
                                            1,43)">am </button> 
                                        <a data-toggle="modal" href="#add_apt_status" class=""><input type="number" value="8" name="" class="number_planner"></a>
                                        <input type="number" value="9" name="" class="max_limit" disabled="">
                                        <input type="hidden" value="am" name="" class="timeslot_max_limit" disabled="">
                                </div>
                                <div class="row margin_two_planner">
                                        <button type="button" class="btn btn-sm btn-primary" onclick="book_appointment_timeslot(19,&quot;2017-06-01&quot;,
                                            2,43)">pm </button> 
                                        <a data-toggle="modal" href="#add_apt_status" class=""><input type="number" value="6" name="" class="number_planner"></a>
                                        <input type="number" value="5" name="" class="max_limit" disabled="">
                                        <input type="hidden" value="pm" name="" class="timeslot_max_limit" disabled="">
                                </div>
                            </td>
                            <td style="width: 20%;"> 
                                    <textarea id="" class="form-control initial_cap appointment_note" required="required" rows="3" name="appointment_note" cols="50" aria-required="true" disabled="">       asdsad             </textarea>
                            </td>
                            <td style="width: 20%;"> 
                                <textarea id="" class="form-control initial_cap holiday_note" required="required" rows="3" name="holiday_note" cols="50" aria-required="true" disabled="">       asasdsaddsad        </textarea>
                            </td>
                            <td>
                            <div class="text-right">
                                    <input type="hidden" class="planner_date" name="" value="2017-06-01">
                                    <input type="hidden" class="contract_id" name="" value="43">
                                    <button type="button" id="" class="btn btn-primary appointment_edit_button">edit </button>
                                    <button type="button" id="" onclick="planner_note_edit(10,event)" class="btn btn-md btn-primary appointment_update_button" style="display:none"> update </button>
                                    <button type="button" id="" class="btn btn-md btn-cancel appointment_cancel_button" style="display:none">cancel </button>
                            </div>
                            </td>
    </tr>
</tbody>

通过这个约会编辑按钮类我正在做这个过程。

$(".appointment_edit_button").on("click",function(event) {   
        $(this).closest('tr').find(".appointment_note").prop("disabled", false);
        $(this).closest('tr').find(".holiday_note").prop("disabled", false);
        $(this).closest('tr').find(".max_limit").prop("disabled", false);
        $(this).next('button').show();
        $(this).next('button').next('button').show();
        $(this).hide();
});

我看起来像。

Answer 1

我猜你的 dom 是由那个 ajax 成功回调操作的，所以点击事件注册被删除了。尝试在ajax回调中再次绑定click事件。

function book_appointment_timeslot(job_id,planner_date,time_slot,contract_id){    
   $.ajax({
              type: "POST",
              url: "/add_appointment_planner",
              data: { contract_id: contract_id,job_id : job_id,  planner_date: planner_date, time_slot: time_slot, _token: CSRF_TOKEN },  
              success: function(data){
                     if(data['status']=='success')
                     {
                            show_notification(data['status'],data['message']);
                            $("#apt_status_table").load(location.href + " #apt_status_table");
                            $(".tbl_planner_list_whole").load(location.href + " .tbl_planner_list_whole");
                            $('.appointment_edit_button').click(function(){alert("success");});

                     }
              }
});
}

Answer 2

在 ajax 响应之后，在加载 DOM 区域时，您对特定调用（在您的情况下是单击）的 div 绑定将被删除。尝试在 ajax 响应成功时再次初始化您的绑定。