Jquery-与Chaining一起工作，但不能分开

Question

我是一名经验丰富的开发人员，是Jquery的新手。我遇到了一个问题，我的代码在链接在一起时可以工作，但在分离时不能工作，我想了解Jquery的行为。

我有一个<div>，里面有4个按钮。当按下其中一个按钮时，我需要所有4个按钮都消失，并用一个新按钮来替换它(新按钮是一个与按下的按钮值相同但CSS不同的按钮，使其看起来不同)

当按下按钮时，我像这个一样清除<div>

$(this).parent().empty();

然后我建立了新的按钮，我想插入

var splitstr = event.target.id.split('-');
var pick = splitstr[0];
var position_id = splitstr[1];
var singlebutton = '<button class="pick' + pick + ' pickbutton-box btn btn-primary btn-large madepick" name="pick" ' + 'id="made'+ position_id + '" ' + 'value="' + pick + '">' + pick + '</button>';

然后我试着把它插回父级：

$(this).parent().append(singlebutton);

当我这样做时，<div>中的所有4个按钮都会被删除，但不会添加新按钮。但是，如果我在清空并附加之前构建字符串

var singlebutton = " ---- HTML CODE for button ---- "
$(this).parent().empty().append(singlebutton);

一切如预期。这对我来说似乎没有任何意义。有人能解释一下发生了什么吗。

Answer 1

您声明您有这样的东西：

<div>
<button>click me</button>
<button>click me</button>
<button>click me</button>
<button>click me</button>
</div>

像这样的事件处理程序：

$('div button').click(function() {
$(this).parent().empty();
// etc
});

当处理程序代码运行时，this指向单击的按钮，该按钮被$(this).parent().empty();删除。您需要保存对父div的引用，以便以后能够引用它，因为this将变为空。类似这样的东西：

$('div button').click(function() {
var div = $(this).parent().empty();
// cannot use 'this' anymore below this point
div.append('something');
});

链式版本之所以有效，是因为对父元素的引用是从.parent开始向前传递的，而this的值变得不相关。