Question

我试图创建一个脚本，将P行更改为输入字段，让用户编辑它们，然后在通过ajax检查外部php文档后恢复到p行。然而问题似乎是我不能在ajax部分使用它，它打破了代码。我怎么解决这个问题？我是否需要发布HTML？

$(document).ready(function () {

    function changeshit(result, that) {
        if (result == "success") {

            $(that).closest('div').find('input').each(function () {


                var el_naam = $(that).attr("name");
                var el_id = $(that).attr("id");
                var el_content = $(that).attr("value");

                $(that).replaceWith("<p name='" + el_naam + "' id='" + el_id + "'>" + el_content + "</p>");

            });


            $(".editlink").replaceWith("<a href=\"#_\" class=\"editlink\" name=\"edit\" id=\"" + editid + "\">Bewerken</a>");
        } else {

            alert(result);
        }
    }



    $(".editinv").on('click', 'a', function () {

        var editid = $(this).attr("id");
        var edit_or_text = $(this).attr("name");

        if (edit_or_text == "edit") {


            $(this).closest('div').find('p').each(function () {

                var el_naam = $(this).attr("name");
                var el_id = $(this).attr("id");
                var el_content = $(this).text();

                $(this).replaceWith("<input type='text' name='" + el_naam + "' id='" + el_id + "' value='" + el_content + "' />");

            });


            $(".editlink").replaceWith("<a href=\"#_\" class=\"editlink\" name=\"done\" id=\"" + editid + "\">Klaar</a>");

        } else if (edit_or_text == "done") {


            var poststring = "";
            $(this).closest('div').find('input').each(function () {

                var el_naam = $(this).attr("name");
                var el_id = $(this).attr("id");
                var el_content = $(this).attr("value");

                poststring = poststring + '' + el_naam + '=' + el_content + '&';

            });

            poststring = poststring + 'end=end'

            $.ajax({
                url: 'http://' + document.domain + '/klanten/updateaddress.php',
                type: 'post',
                data: poststring,
                success: function (result, this) {

                    changeshit(result, this);


                }
            });
        }

    });
});

Answer 1

尝试以下方法：

在$(".editinv").on('click', 'a', function () {添加

下

$(".editinv").on('click', 'a', function () {
    var element = this;

然后将其更改为：

$.ajax({
    url: 'http://' + document.domain + '/klanten/updateaddress.php',
    type: 'post',
    data: poststring,
    success: function (result) {
        changeshit(result, element);
    }
});

如果我正确理解你想要做什么

Answer 2

如果您只是添加：

context: this

到$.ajax选项后，success处理程序将自动使用正确的this值进行调用，因此您不需要that参数。

您将不再需要围绕success回调的额外函数包装器，因此您可以使用：

$.ajax({
    url: 'http://' + document.domain + '/klanten/updateaddress.php',
    type: 'post',
    data: poststring,
    context: this,       // propagate "this"
    success: changeshit  // just pass the func ref
});

Answer 3

是的，常见的解决方案是声明一个var示例self = this并使用该变量

 var self = this;
 $.ajax({
            url: 'http://'+document.domain+'/klanten/updateaddress.php',
            type: 'post',
            data: poststring,
            success: function(result) {   

            changeshit(result, self);


            }
        });
    }

这样，此上下文将保存在变量中。

Answer 4

有几种方法可以实现这个目标

1）如果你阅读了文档（jQuery.ajax），你会发现你可以为ajax方法提供一个上下文

<强>上下文 类型：PlainObject 此对象将成为所有与Ajax相关的回调的上下文。默认情况下，上下文是一个对象表示调用中使用的ajax设置（$ .ajaxSettings合并将设置传递给$ .ajax）。

$.ajax({
    url: 'http://'+document.domain+'/klanten/updateaddress.php',
    type: 'post',
    data: poststring,
    context: this,
    success: function(result) {   
        // the context sent above would become the context of this function when called by jquery
        changeshit(result, this);
    }
});

以这种方式使用它甚至可以像下面的代码

那样使用它

function changeshit (result) {
    var $that = $(this);
    if (result == "success") {

            $that.closest('div')... // cool ha ?
};
$.ajax({
    url: 'http://'+document.domain+'/klanten/updateaddress.php',
    type: 'post',
    data: poststring,
    context: this,
    success: changeshit
});

2）您可以利用闭包（read more here或搜索谷歌），因此您的代码将成为

var context = this;
$.ajax({
    url: 'http://'+document.domain+'/klanten/updateaddress.php',
    type: 'post',
    data: poststring,
    success: function(result) {   
        // here you can use any variable you declared before the call
        changeshit(result, context);
    }
});

作为旁注，我建议您使用变量/对象缓存，因此在函数顶部声明var $this = $(this)并通过您的函数使用它，而不是每次需要时调用$(this)它

在ajax结果中得到这个

4 个答案: