jquery - 通过 AJAX 修改 DOM 后功能不起作用

Question

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

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

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

问题是我想在填充我的容器的 AJAX 调用之后执行这个函数#prevision_form。

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); });
};

所以，我的代码给出了一些-synthetized- 像这样：

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

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

有什么建议吗？

Answer 1

If you want the .perimetre elements in the updated html, you will need to access them after the ajax call is completed.

Since you want to do that from a click on another element you will have to check if the ajax is complete.

You can use the $.active for that (which stores the number of active ajax calls).

Something like

   $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..');
      }
   });

---

original answer

The issue is with

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

which overwrites the contents of the #prevision_form element.

If you want to get the .perimetre elements before they get overwritten you need to access them earlier..

var perimetreIds = [];

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

---

Additionally you can improve your getPerimetre by using the .map() and .get() jquery method

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

Answer 2

使用 on 代替绑定示例

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

Answer 3

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

Answer 4

尝试这样的事情，那是因为你的 ajax 需要时间（异步）意味着 getPerimetre() 函数被执行所以使用异步。

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

Answer 5

改用这个：

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); });
};