使用 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 被评估，这意味着“cb”超出范围。

到目前为止，我所做的是创建了几个辅助函数：

var target = undefined;

function setTarget(val) {
  target = val;
}

function getTarget() {
  return target;
}

这会将代码的第一个 sn-p 变成这样：

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

然后在服务器的响应中，我在需要的地方调用 getTarget。这似乎很骇人听闻...有什么建议吗？

Answer 1

目前还不清楚您实际上要做什么，但我觉得您想查看该 AJAX 调用的成功参数。成功回调函数应在父范围内执行并执行您要查找的操作。

请参阅this page in the jQuery docs 上的“成功”。

Answer 2

所以您要做的是让表单在用户选中/取消选中复选框时通过 ajax 提交内容？并且因为有多个复选框，您需要找出是哪一个触发了提交，这样您就可以将其值更改为存储在服务器上的任何值？

如果您每次都提交整个表单，为什么不回复所有复选框值，然后逐个更改它们？如果没有，让服务器回复 id 和复选框的值，然后使用 jquery 找到具有该 ID 的复选框，然后更改它的值。

Answer 3

怎么样：

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

});