javascript - 将事件绑定(bind)到 ajax 成功返回的 View 中的元素

Question

我有一个按钮，它发出 AJAX 请求并用返回的 View 填充 div。然后我希望它将 1 个单击事件绑定(bind)到一个按钮，该按钮是返回的 View 内的 DOM 元素。

这是我用于获取 View 的第一个 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");
});

这是我想要附加到事件的 attempts() 函数。这样我就可以从表单进行另一个 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");

 }

所以我的问题是，无法弄清楚为什么，但是attempt()函数在第一次ajax调用后立即运行。并且它从不将事件绑定(bind)到按钮。 ajax 调用是一个接一个地进行的，没有任何延迟。也不确定我是否可以像我一样将 e 放入 attempts() 调用中。

Answer 1

您正在调用尝试，而不是分配它

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

需要

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

您也可以避免每次 html 更改时进行分配。您可以使用事件委托(delegate)并捕获 DOM 树上层的提交事件。

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