按钮单击不工作在引导模式下调用Ajax后

Question

Button在bootstrap Modal中调用ajax之前正在工作。 但在Ajax调用后，点击事件无效。

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

我尝试过以下解决方案，

解决方案-1： -

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

解决方案-2： -

unbind()

我也试过<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> 。它也不起作用。 我把脚本直接放在Console中。然后它正在工作。所以可能是由于bootstrap模态。

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

编辑： -

HTML代码： -

$(".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();
});

通过这个appointment_edit_button类，我正在做这个过程。

Comparator

我看起来像。

Answer 1

我猜你的dom被ajax成功回调操纵，因此删除了点击事件注册。尝试在ajax回调中再次绑定click事件。

class RobotClass():
    def __init__(self):
        self.addresses   =   [0x03,
                              0x04,
...

class Data():
    def __init__(self, robot, ui):
        self.robot = robot

...
class Controller():
    def __init__(self):
        self.robot = RobotClass()
        self.ui = UI()
        self.data = Data(self.robot, self.ui)
...
controller = Controller()

Answer 2

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