使用jQuery修改基於AJAX結果的DOM

Question

我不確定基於ajax響應修改DOM的最佳做法。我會盡量讓代碼進行談話，因爲很難解釋。

// page has multiple checkboxes 
$("input[type='checkbox']").live('click', function { 
    var cb = $(this); // for the sake of discussion i need this variable to be in scope 
    $("form").ajaxSubmit({ dataType: "script" }); 
} 

服務器發送回一個響應，和JS得到eval'd，這意味着「CB」超出範圍。

什麼我迄今所做的就是創建了幾個輔助函數：

var target = undefined; 

function setTarget(val) { 
    target = val; 
} 

function getTarget() { 
    return target; 
} 

以及可當作第一個代碼片斷到這一點：

// page has multiple checkboxes 
$("input[type='checkbox']").live('click', function { 
    setTarget($(this)); 
    $("form").ajaxSubmit({ dataType: "script" }); 
} 

然後在服務器的響應我在需要的地方調用getTarget。這似乎是hackish ...任何建議？

Answer 1

目前還不清楚你實際上想要做什麼做，但我覺得你想看看AJAX調用的成功參數。成功回調函數應該在父範圍內執行，並執行你正在尋找的內容。

查看'成功'this page in the jQuery docs。

Answer 2

因此，當用戶選中/取消選中複選框時，您要做的是通過ajax獲取表單以提交內容？由於有多個複選框，您需要找出哪一個觸發了提交，所以您可以將其值更改爲存儲在服務器上的任何值。

如果您每次提交整個表單，爲什麼不用所有的複選框值進行回覆，然後更改其中的每一個？如果沒有，請讓服務器回覆id和複選框的值，然後使用jquery查找帶有該ID的複選框，然後更改它的值。

Answer 3

如何：（globalEval功能的jQuery）

jQuery(function($) { 

    // give it scope here so that the callback can modify it 
    var cb, 
     cbs = $('input[type="checkbox"]'); 

    cbs.live('click', function { 
     // taking away var uses the most recent scope 
     cb = $(this); 

     // disable checkboxes until response comes back so other ones can't be made 
     cbs.attr('disabled', 'true'); // 'true' (html5) or 'disabled' (xhtml) 

     // unless you are using 'script' for something else, it's best to use 
     // a callback instead 
     $('form').ajaxSubmit({ 
      success : function(response) { 
       // now you can modify cb here 
       cb.remove(); // or whatever you want 

       // and re-enable the checkboxes 
       cbs.removeAttr('disabled'); 
      } 
     }); 
    } 

});