使用 jquery 和 ajax 将按钮替换为另一个按钮

Question

我有一个小问题，我试图解决但没有成功，希望你们能帮助我。

所以我有一个按钮，一旦点击它就应该调用一个 Ajax 函数，并将其自身替换为从 Ajax 获得的成功响应。

到目前为止我的 html 代码：

<div class="btn-group">
<button id="button1" class="btn btn-white btn-xs" onclick="like(83,1)">
<i class="fa fa-heart-o"></i>
 J'aime !
</button>
</div>

和 jquery 部分：

function like(id, t) {

    $.ajax({
        type: "GET",
        url: "ajax/likes.php?postID=" + id + "&likeID=" + t,
        dataType: 'html',
        success: function(data) {
            $("#button" + t).replaceWith(data);
        }

    });
}

单击并调用 Ajax 函数有效，我可以从开发者控制台看到所需 HTML 的响应，但原始响应没有被替换。

响应看起来像这样：

<button id='button1' class='btn btn-white btn-xs 1' onclick='like(83,1)'>
<i class='fa fa-heart'></i>
 J'aime plus         
</button>

谢谢！

Answer 1

相同的代码

请检查ajax.success中变量t的值。

var buttonsPlus = ["<button id='button1' class='btn btn-white btn-xs' onclick='like(83,1)'>\n\r<i class='fa fa-heart'></i> \nJ'aime plus\n</button>","<button id='button2' class='btn btn-white btn-xs' onclick='like(83,2)'><i class='fa fa-heart'></i> David plus</button>"];

function like(likes, index){
  // simulate ajax call
  setTimeout(function(){
    $('#button'+index).replaceWith(buttonsPlus[index-1]);
  }, 1000);
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class="btn-group">
<button id="button1" class="btn btn-white btn-xs" onclick="like(83,1)">
<i class="fa fa-heart-o"></i>
 J'aime !
</button>
<button id="button2" class="btn btn-white btn-xs" onclick="like(83,2)">
<i class="fa fa-heart-o"></i>
 David !
</button>
</div>

编辑#2：

尝试将ajax.dataType从html更改为text/plain

Answer 2

建议你尝试使用 jQuery 的 click()，而不是使用 onclick 属性。

或许你可以试试下面的结构，

var ids; //set equal to number of id's in total

for (let i = 0; i < ids; i++) {
    $("button" + i).click({id: 83}, function() {
        callback(i, event.data.id);
    }
}
...
function callback(i,t){
  return function(){
    $.ajax({
            type: "GET",
            url: "ajax/likes.php?postID=" + t + "&likeID=" + i,
            dataType: 'html',
            success: function(data) {
            $("#button" + i).replaceWith(data);
            }
        });
    }
}

编辑：有一种方法可以通过 click() 传递参数。请参阅jQuery's .click - pass parameters to user function 以获得更详尽的解释。