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

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

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

据我所知。这是一个解决方案。在button（buttons）内委派点击事件"#buttons button"进行弹出。我在小提琴中使用了id。你可能在那里上课。

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

fiddle

Answer 5

我根据您的描述重建了应用程序，在我看来它很有效。

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

快速简报：按任意按钮，它将触发点击事件（隐藏/显示消息）。当您按下＆＃34;删除＆＃34;时，按下＆＃34;按钮＆＃34; div将被删除并将附加到＆＃34; popup＆＃34;，因此不会有任何事件，因此我们需要再次添加该事件。这不是最佳做法，但它可以完成工作。

我希望这有帮助，我回答了你的问题。

＆＃13;

// 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);

}

＆＃13;

<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>

＆＃13;

正确的方法来定位jquery元素内的按钮元素？

5 个答案: