在jquery元素中定位按钮元素的正确方法？

Question

我有 jQuery 元素 popup 和 buttons，buttons 是 popup 的子元素。

buttons 包含<button> 元素，我想将点击事件附加到这些元素。

所以我编写了以下代码：

buttons.children("button").on("click", function() {
    //I'm magic
}

但遗憾的是buttons的内容可以动态更改，按钮可以添加和删除：/

所以我通过写作解决了这个问题：

buttons.on("click", "button", function() {
    //I'm magic
}

但buttons 本身可以从popup 中添加和删除。在buttons 被删除并添加回popup 之后，上面的代码不再起作用：/

下面的代码似乎可以解决它：

popup.on("click", "button", function() {
    //I'm magic
}

但这也会在点击 <button> 内的 popup 但不在 buttons 内时触发。

如何仅当<button> 在buttons 内被点击时触发？

感谢您的帮助！

Answer 1

为所有buttons 元素指定一个类，并在委托中引用该类。

popup.on("click", ".buttons button", function() {
    ...
});

好的，以下是您可以在不添加类的情况下执行此操作的方法：

popup.on("click", "button", function() {
    var clickedButton = this;
    buttons.each(function(i, aButton) {
        if ($.contains(aButton, clickedButton)) {
            // I'm magic
            return false; // stop looping
        }
    });
});

这使用委托来触发popup 中的任何按钮。然后当代码被触发时，它会搜索所有buttons 以查看此按钮是否在其中一个内。如果是这样，它会执行你想要的代码，并跳出循环。

Answer 2

在执行 onclick 处理程序之前尝试检查父类：

popup.on("click", "button", function() {  
    if ( $(this).parent().hasClass('buttons') ) {
        //I'm magic
    }
}

Answer 3

我后来想出了一个部分解决方案，但看起来有点混乱，因为它仍然将点击事件附加到 popup 内的所有 <button> 元素。

popup.on("click", "button", function() {  
    if($.contains(buttons[0], $(this)[0])) {
        //I'm magic
    }
}

完全符合我要求但不起作用的代码是：

popup.on("click", buttons.find("button"), function() {  
    //I'm magic
}

Answer 4

据我了解。这是一个解决方案。将buttons ("#buttons button") 内的button 的点击事件委托给弹出窗口。我在小提琴中使用了 id 。你可能在那里上课。

$('#popup').on("click","#buttons button", function(){
  alert('click');
})

fiddle

Answer 5

我根据您的描述重建了应用程序，在我看来它可以工作。

我使用 div 作为元素，但你明白了。

快速简介：按下任意按钮，将触发点击事件（隐藏/显示消息）。当你按下“Remove”时，“buttons” div 将被移除并附加到“popup”中，因此它上面不会留下任何事件，因此我们需要再次添加事件。这不是最佳做法，但可以完成工作。

我希望这会有所帮助并且我回答了你的问题。

// When Buttons Div is clicked, the message is hidden / shown
$("#buttons").on("click", function() {
    if($("#txt").is(":visible")){
			$("#txt").hide();
		}
		else{
			$("#txt").show();
		}
});

// When the Remove Button is pressed, "Buttons" will be deleted and appended to Popup
$("#modify").on("click", function(){
		$("#buttons").remove();
		
		// Ignore this... this is the code which can be placed in a function
		$("#popup" ).append('<div id="buttons"><FORM><SELECT name="element"><OPTION value="button">Button</OPTION></SELECT><INPUT type="button" value="Add" onclick="add(document.forms[0].element.value)"/><span id="fooBar">&nbsp;</span></FORM><button type="button">Switch Magic 1</button><button type="button">Switch Magic 2</button><button type="button">Switch Magic 3</button><button type="button">Switch Magic 4</button></div>' );
		
		
		$("#buttons").on("click", function() {
    if($("#txt").is(":visible")){
			$("#txt").hide();
		}
		else{
			$("#txt").show();
			$("#buttons").remove();
		}
	});
});

function add(type) {

	//Create an input type dynamically.
	var element = document.createElement("input");

	//Assign different attributes to the element.
	element.setAttribute("type", type);
	element.setAttribute("value", type);
	element.setAttribute("name", type);


	var foo = document.getElementById("fooBar");

	//Append the element in page (in span).
	foo.appendChild(element);

}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<SCRIPT language="javascript">
function add(type) {

	//Create an input type dynamically.
	var element = document.createElement("input");

	//Assign different attributes to the element.
	element.setAttribute("type", type);
	element.setAttribute("value", type);
	element.setAttribute("name", type);


	var foo = document.getElementById("fooBar");

	//Append the element in page (in span).
	foo.appendChild(element);

}
</SCRIPT>
<div id="popup">
<button id="modify" type="button">
Remove
</button>
<div id="buttons">
<FORM>
<SELECT name="element">
	<OPTION value="button">Button</OPTION>
</SELECT>
<INPUT type="button" value="Add" onclick="add(document.forms[0].element.value)"/>
<span id="fooBar">&nbsp;</span>
</FORM>
<button type="button">
Switch Magic 1
</button>
<button type="button">
Switch Magic 2
</button>
<button type="button">
Switch Magic 3
</button>
<button type="button">
Switch Magic 4
</button>
</div>
</div>
<label id="txt">I'm magic!</label>