使用JQuery将HTML插入到DIV中

Question

我的html中有一堆嵌套在div标签内的按钮

<div class="button-wrapper">
    <button class="button-class">Click here</button>
</div>
<div class="button-wrapper">
    <button class="button-class">Click here</button>
</div>
...

点击按钮会使用JQuery发布一些数据，并通过.ajax成功函数返回一些HTML。我试图替换每个点击的按钮的div内容，但出于某种原因，我的JQuery选择器似乎不起作用。

在我的成功函数中尝试以下操作:

$(this).parent().html(data);

我知道数据已经成功提交，并且成功函数也在工作。但奇怪的是，以下代码有效：

$(".button-wrapper").html(data);

但显然这会将HTML添加到每个div中，而不仅仅是点击按钮的那个div。

有人知道我在这里可能错了哪里吗？

- rolling stone

---

看起来这应该可以工作，但我认为你有范围问题，除非你发布整个.ajax函数，否则我们无法确定。请发布完整的函数。 - Kevin Bowersox

听起来像是关键字 this 的另一个问题。你能否发布执行插入任务的脚本让我们看看？没有看到脚本，我们无法发表太多意见。 - shinkou

Answer 1

在jQuery中，'this'经常在回调函数内被覆盖。解决方法是使用另一个变量引用this：

var _this = this; //or var $_this = this;
$(_this).parent().html(data);

- Justin Lucas

Answer 2

问题在于，你的回调函数中的this不再是按钮。请尝试以下代码：

$(".button-wrapper").click(function(){
   var that=this;
   $.ajax(
      // ...
      success: function(data){
         $(that).parent().html(data);  
      }
   );
});

- James Montagne

---

+1 谢谢，这个很好用！有几个类似的答案，所以我选择了第一个发布的答案。 - rolling stone

Answer 3

这将对您有所帮助...

$("button").click(function(){
    $("div").html("Hello <b>world</b>!");
}); 

- Rejwanul Reja

---

这个问题是关于在jQuery回调函数中正确引用this的问题。这个答案与问题无关（除非你的朋友们串通起来给你点赞）-1 - iCollect.it Ltd

Answer 4

HTML：

<div class="button-wrapper">
    <button class="button-class">Click here</button>
</div>
<div class="button-wrapper">
    <button class="button-class">Click here</button>
</div>

JS：

  $.ajax({
//..
      success: function(){
         $(".button-class").click(function(){
           $(this).parent().html("Dynamic Html");
        });
      }
    });

- Kevin Bowersox

---

谢谢@kmb385，但是只是提供信息，我测试过了，实际上并没有起作用。 - rolling stone

Answer 5

你需要知道，你需要加载成功函数的日志，例如：setInterval(myFunction,2500);

- Younglegend