Question

我在模板上有一个按钮和用户名，如果用户点击按钮，Ajax应该使用新的CSS样式替换用户的名称和按钮。

这是我的Ajax：

$('#fulfillButton').bind('click',function() {
    $.ajax({
        type : "GET",
        contentType : "application/json; charset=utf-8",
        url : "order/${orderID}",
        dateType : "json",
        cache: false,
        success: function (data) {
            if(data.statusCode=="OK")
            {
                $('#replace').replaceWith("<div class ="error_message">"+ data.body +"</div>");
            }
        },

        error: function (data) {
            alert("Something went wrong, please retry again");
        },
   });
});

这是我的HTML：

<div id="replace">
    <div class="full_name">
        ${name}
    </div>
    <button id="fulfillButton" type="button" class="action-button shadow animate green">
        FulFill
    </button>
</div>
<button id="goBackButton" type="button" class="go_back_button">
    Go Back
</button>

然而，当我点击按钮时，什么也没发生。我在这里遗失了什么？我正在使用Jquery 1.6。

Answer 1

你的代码一般都很好，而且工作正常。唯一出错的是，替换元素的html转义：

// before
$('#replace').replaceWith("<div class ="error_message">"+ data.body +"</div>");

// after
$('#replace').replaceWith('<div class="error_message">' + data.body + '</div>');

你应该真正更新你的jQuery版本。 1.6已有一百岁了！：）

<强> Working example.

Ajax用另一个div替换div（新css）

1 个答案: