Question

我有一个问题我自己无法解决：

我有一个函数，getPerimetre()它应该返回类.perimetre所有元素的id

var getPerimetre = function () {
   var perimetre = [];
   $(".perimetre").each(function() {
       perimetre.push($(this).attr("id"));
   });
   return perimetre;
};

问题是我想在填充我的容器#prevision_form

的aJax调用后执行此函数

var updateForm = function () {
   var data = getData();

    var form_request = $.ajax({
            url: "lcl-flux-prevision_modification_form.php",
            type: "POST",
            data: data
    });
    form_request.fail(function(jqXHR, textStatus) { alert( "Request failed: " + textStatus ); });
    form_request.done(function(html) { $("#prevision_form").html(html); });
};

所以，我的代码给出了一些东西 - 像这样的合理化：

updateForm();
if(!$._data($("#saveRecord")[0], "events")) {
   $j("#saveRecord").bind("click", function() {
      alert(getPerimetre());
   });
}

当我点击我的按钮#saveRecord时，警告为空。如果我在 aJax调用之前调用我的函数getPerimetre() ，它可以正常工作。

有什么建议吗？

Answer 1

$.ajax({
        url: "lcl-flux-prevision_modification_form.php",
        type: "POST",
        data: data,
        success: function(){
            // Call your function here
        }
});

Answer 2

尝试这样的事情，因为你的ajax花费时间（异步）意味着getPerimetre（）函数被执行所以使用async。

 var form_request = $.ajax({
        url: "lcl-flux-prevision_modification_form.php",
        type: "POST",
        data: data,
        async :false
});

Answer 3

用来代替绑定示例

  $(document).on("click","#saveRecord",function(){
   ....
   })

Answer 4

请改用：

var updateForm = function () {
var data = getData();

var form_request = $.ajax({
        url: "lcl-flux-prevision_modification_form.php",
        type: "POST",
        data: data,
        success: function(){
            updateForm();
            if(!$._data($("#saveRecord")[0], "events")) {
               $j("#saveRecord").bind("click", function() {
                  alert(getPerimetre());
               });
            }
        }
});
form_request.fail(function(jqXHR, textStatus) { alert( "Request failed: " + textStatus ); });
form_request.done(function(html) { $("#prevision_form").html(html); });
};

Answer 5

如果您想要更新的html中的.perimetre元素，则需要在完成ajax调用后访问它们。

由于你想从另一个元素click那样做，你必须检查ajax是否完整。

您可以使用$.active（存储活动的ajax调用次数）。

像

这样的东西

   $j("#saveRecord").bind("click", function() {
      if (!$.active){
         alert(getPerimetre());
      } else {
         // notify user that the data is not yet available..
         // or something else..
         alert('AJAX call in progress..');
      }
   });

原始回答

问题在于

form_request.done(function(html) { $("#prevision_form").html(html); });

覆盖#prevision_form元素的内容。

如果您希望在被覆盖之前获取.perimetre元素，则需要提前访问它们。

var perimetreIds = [];

var getPerimetre = function () {...}
var updateForm = function () {
    ...
    form_request.done(function(html) { 
        perimetreIds = getPerimetre();
        $("#prevision_form").html(html); 
    });
    ...
}

此外，您可以使用.map()和.get() jquery方法改进getPerimetre

var getPerimetre = function () {
   return $(".perimetre").map(function(){ return this.id }).get();
};

通过aJax修改DOM后，函数无法正常工作

5 个答案: