Django Bootstrap Modal Ajax - 第一次完美运行，第二次 - 运气不好

Question

我正在使用 Django 2.2 Bootstrap。

这是 approach 用于

打开模态 window ,
用户更新数据，
用户收藏
window 被打开的底层 table 被更新，模态 window 被关闭

到目前为止一切正常，但是，当您单击相同的按钮打开 window 时会出现问题。这里当你点击按钮时，没有任何反应！

这是 javascript 文件。

            $("#modal-risk-profile").on("submit", ".form-risk-profile", function () {
            var form = $(this);         

            $.ajax({
                url:form.attr("action"),
                data:form.serialize(),
                type:form.attr("method"),
                dataType:'json',
                success: function(data) {
                    console.log(data.form_is_valid);
                    if(data.form_is_valid) {
                        console.log(data.html_planner_client_list);
                        $("#id_client_table tbody").html(data.html_planner_client_list); // if you remove this line, modal window appears without any issues
                        $("#modal-risk-profile").modal("hide");
                        console.log("I have returned with success");
                    }
                    else {
                        console.log("I am in else");
                        $("#modal-risk-profile .modal-content").html(html_form);
                    }                       
                }
            });

            return false;
        });

html_planner_client_list的输出如下：

<tr>
<td> Rajesh </td>
<td> 01-04-2000 </td>
<td> Bangalore </td>
<td> ramachandran.test@gmail.com </td>
<td> Salaried </td>
<td class="text-center"> 

        <button class="button-risk-profile btn btn-danger btn-sm py-0" style="font-size:0.9em" data-url="/client/riskprofileplanner/19/">
            Take Questionnaire 
        </button> 


</td>
<td> Subramanian</td>
<td class="text-left"> 
    <a href="/client/client_select/19/" class="btn btn-primary btn-sm py-0" style="font-size: 0.9em;">Select </a>               
    <a href="/client/client_edit/19/" class="btn btn-primary btn-sm py-0" style="font-size: 0.9em;">Edit </a> 
    <a href="/client/client_report/19/" class="btn btn-primary btn-sm py-0" style="font-size: 0.9em;">Report </a>
    <button class="button-choose-planner btn btn-primary btn-sm py-0" style="font-size: 0.9em;" data-url="/client/select_planner/19/">
        Planner 
    </button> 
</td>

Inspector Log 中没有错误，Django 中也没有错误。

可能会出什么问题？

Answer 1

我用这个 link 解决了这个问题：

            $('.button-risk-profile').click(function(){

            var btn = $(this);
            console.log("I am in client Risk Profile")

            $.ajax({
              url: btn.attr("data-url"),
              type: 'get',
              dataType: 'json',
              beforeSend: function () {
                $("#modal-risk-profile").modal("show");
              },
              success: function (data) {
                $("#modal-risk-profile .modal-content").html(data.html_form);
              }
            });             

        });

我改成：

            $('.client-table').on('click',".button-risk-profile",function(){

            var btn = $(this);
            console.log("I am in client Risk Profile")

            $.ajax({
              url: btn.attr("data-url"),
              type: 'get',
              dataType: 'json',
              beforeSend: function () {
                $("#modal-risk-profile").modal("show");
              },
              success: function (data) {
                $("#modal-risk-profile .modal-content").html(data.html_form);
              }
            });             

        });

Django Bootstrap Modal Ajax - 第一次完美运行，第二次 - 运气不好

Django Bootstrap Modal Ajax - 1st time it works perfectly, 2nd time - no luck

javascript

django

ajax

modal-dialog