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

Question

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

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 后，上面的代码不再有效：/

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

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

但是当 <button> 在 popup 内但不在 buttons 内被点击时也会触发。

如何只有点击buttons里面的<button>才触发？

感谢您的帮助！

Answer 1

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

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

Answer 2

给所有buttons元素一个class，并在委托中引用它。

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

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

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 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 的点击事件委托给弹出窗口。我在fiddle中使用了id。那里可能有 class。

$('#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>

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

Correct way to target button elements inside jquery element?

html

javascript

jquery

event-delegation