Question

我有一个按钮，用于管理AJAX请求，并使用返回的视图填充div。然后我希望它将1单击事件绑定到一个按钮，该按钮是返回的视图中的DOM元素。

这是第一个获取视图的AJAX调用的处理程序。

// gets the next question or video
$("#next").click(function(e){
    e.preventDefault();

    $.ajaxSetup({
        headers: { 'X-CSRF-Token' : $('meta[name=_token]').attr('content') }
    });

    var host = "http://" + window.location.hostname;

    $.ajax({
        type: "POST",
        url : host + "/next",
        success : function(data){
            console.log(data);
            $('#test-content').html(data);
            $("#submit-question").bind('submit', attempt(e));
        }
    },"json");
});

这是我想要附加到事件的attempt（）函数。这使得我可以从表单中进行另一个AJAX调用。或者至少我认为会这样。

function attempt(e){

      e.preventDefault();

      $.ajaxSetup({
         headers: { 'X-CSRF-Token' : $('meta[name=_token]').attr('content') }
      });

      // input data
      var question_id = $('input:hidden[name=question_id]').val();
      var attempt =  $("input[name=attempt]").val();

      var dataString = 'question_id='+question_id+'&attempt='+attempt;

      var host = "http://" + window.location.hostname;

      $.ajax({
          type: "POST",
          url : host + "/attempt",
          data : dataString,
          success : function(data){
          console.log(data);
              $('#show-answer').html(data);
              $('#next-button').show();
          }
      },"json");

 }

所以我的问题是，无法找出原因，但在第一次ajax调用之后，attempt（）函数会立即运行。它永远不会将事件绑定到按钮上。 ajax调用一个接一个地进行，没有延迟。也不确定我是否可以像我一样将e放入try（）调用中。

Answer 1

您正在呼叫尝试，而不是分配

$("#submit-question").bind('submit', attempt(e));

需要

$("#submit-question").bind('submit', attempt);

每次更改html时，您也可以避免分配。您可以使用事件委派并在DOM树中进一步捕获提交事件。

$('#test-content').on("submit", "#submit-question" , attempt);

Answer 2

如果我正在读这个，请试试这个：

 $('#test-content').html(data);
 $("#test-content").on('submit','#submit-question',function(){ attempt(e)});

将事件绑定到ajax成功返回的视图中的元素

2 个答案: