Question

在页面上，我有一个下拉菜单（当我更改选择的选项时，将首先触发ajax）。第一个ajax运行正常，页面正在更新。更新页面后，在UI上有一个添加按钮，单击后会触发第二个Ajax。它应该提交表格。但是添加按钮ajax（第二个ajax）只有在我没有运行第一个ajax时才起作用。如果我先运行第二个ajax，第二个ajax甚至都不会被调用。

我怀疑在调用第一个ajax之后，可能无法在DOM上访问元素.add-question-form

第一个ajax：

var topicId = $(".topic_select option:selected").attr("data-topic");
    $(".topic_select").change(function(){
      var topicId = $(".topic_select option:selected").attr("data-topic");
      if (topicId == undefined){ topicId = 999999; };
      $.ajax({
          type: "GET",
          url: "{% url 'recruiter:add_question_library' %}",
          data: {
            topicId: topicId,
          },
          success: function(response){
              // alert("Showing questions from topic " + topicId);
              $("#question_list").replaceWith($("#question_list",response));
          }
      });
    });

第二个Ajax：

$('.add-question-form').on('submit',function(e){
        alert("hh");
        e.preventDefault();
        var $this = $(this);
        var qstn_id = $this.attr('id').split('_')[1];
        $.ajax({
            type: "POST",
            url: "{% url 'recruiter:add_question_to_interview' %}",
            data: {
              qstn_id: qstn_id,
              'csrfmiddlewaretoken': '{{ csrf_token }}',
            },
            success: function(response){
              // $("#question-alert").animate({right: '20%'}, "slow");
              // $('#question-alert').append('<div class="alert alert-success alert-dismissible fade show" role="alert"><strong>Question added to interview</strong><button type="button" class="close" data-dismiss="alert" aria-label="Close"><span aria-hidden="true">&times;</span></button></div>');
                alert("Added Question with id " + qstn_id);
            }
        });
    });

HTML

<div class="col-md-4">
            <select id="topic" name="topic_list" class="form-control topic_select">
              <option>All Topics</option>
              {% for topic in all_topics %}
               <option data-topic="{{topic.id}}" value="{{topic.name}}">{{topic.name}}</option>
              {% endfor %}
            </select>
          </div>


<table class="table table-striped" id="question_list">
          <tbody>
            {% for x in questions_in_topic %}
            <tr>
              <td class="w-90">
                {{ x.question_id__description }}
                <span class="badge badge-pill badge-success">{{ x.topic_id__name }}</span>
              </td>
              <td class="w-10">
                <form class="form-inline add-question-form" id="addqstnform_{{ x.question_id }}" >
                  {% csrf_token %}
                  <button type="submit" class="btn btn-add-question" data-questionid="{{ x.question_id }}"
                  style="background-color: #ff7a59;color: white; font-size:0.8em; padding: 0.15em 0.5em">+</button>
                </form>
              </td>
            </tr>
            {% endfor %}
          </tbody>
        </table>

Answer 1

我将提交表单代码更改为此，并且开始工作。

$('body').on("submit", ".add-question-form", function(e) {
      e.preventDefault();
      var $this = $(this);
      var qstn_id = $this.attr('id').split('_')[1];
      $.ajax({
          type: "POST",
          url: "{% url 'recruiter:add_question_to_interview' %}",
          data: {
            qstn_id: qstn_id,
            'csrfmiddlewaretoken': '{{ csrf_token }}',
          },
          success: function(response){
            // $("#question-alert").animate({right: '20%'}, "slow");
            // $('#question-alert').append('<div class="alert alert-success alert-dismissible fade show" role="alert"><strong>Question added to interview</strong><button type="button" class="close" data-dismiss="alert" aria-label="Close"><span aria-hidden="true">&times;</span></button></div>');
              alert("Added Question with id " + qstn_id);
          }
      });
    });

第一次Ajax调用后未提交Django表单

1 个答案: