Javascript 仅在两个选择器之一上工作的Jquery委托事件

虽然我想这应该行得通，但它只适用于单选按钮。因为每次内容动态变化时，我都必须放置两个选择器，因为有时单选按钮会添加到DOM中，有时会添加到复选框中

问题是，除非您明确单击复选框或单选按钮，而不是覆盖整个区域的标签，否则输入的单击区域将变得不可读取

这是html（其中包含rails，但您可以理解其结构）

---

该代码用于单选按钮，但同样适用于复选框。

为什么需要在事件处理程序中使用事件处理程序。。你可以这样简单地使用它

<label for="choice_<%= choice.id %>">
            <%= radio_button_tag("choice","#{choice.id}",false,class:"radio big-radio") %>
            <% if choice.image? %>
              <%= image_tag rewrite_url(choice.image_url(:resized)), class:"choice-image" %>
            <% else %>
              <%= choice.description %>
            <% end %>

          </label>

注意：确保包含jquery

---

您只能绑定一次：

$(document).ready(function(){ 
     $("body").on("change", "input[type='checkbox']",function() {
        var that = this;
        if (!$(this).parent().hasClass("remember-label")){
          $(this).parent().css("background-color", function() {
              return that.checked ? "#C0E9F7" : "";
          });
        }
    });
    $("body").on("click", "input[type=radio]" ,function() {
      $(this).parents().eq(1).siblings().css("backgroundColor","");
      $(this).parents().eq(1).css("backgroundColor","#C0E9F7");
    });
});

---

不要在绑定事件中绑定其他事件。为什么要在事件处理程序中创建事件处理程序？这不就是无限期地添加更多事件处理程序吗？为什么不在页面加载时创建一次事件处理程序呢？因为它不起作用。我每次动态呈现输入，似乎事件处理程序都绑定到以前的元素，并用新元素替换。是的，这更干净，但我现在仍然尝试了。它每次只绑定到一个输入。我的意思是假设我有3个输入复选框，当我点击下一步时，复选框或单选按钮可能会出现。出于某种原因（仍然使用您的代码），该代码适用于两种输入类型中的一种，直到我刷新页面并重新开始，它可能只适用于单选按钮。这有意义吗？其他类型的单选按钮将完全不可选择，除非我明确单击复选框/单选按钮，其中覆盖大量区域的标签将触发该按钮。添加htmlabove@PetrosKyriakou请用您的代码更新此内容，让我们知道发生了什么，因为有rails代码动态呈现一个部分文件，其中每次都包含复选框或单选按钮，我想在新创建的动态复选框/单选框上绑定事件buttons@PetrosKyriakou渲染后，您可以右键单击并单击inspect elements以打开浏览器控制台，并从中复制/粘贴html代码。刚刚完成了这项操作—更新了您的小提琴。但单击“下一个问题”按钮时，它会使用复选框或单选按钮再次渲染部分。不起作用的是，标签变得不可精确读取。如果我单击复选框本身，则jquery中编写的css将正确应用。现在尝试此方法，遗憾的是它仅适用于单选按钮复选框有问题。它仅在您第一次选中复选框时有效。之后，当我动态地替换复选框时，覆盖复选框的标签变得不可点击，而单选按钮则一切正常。

$(document).ready(function(){ 
     $("body").on("change", "input[type='checkbox']",function() {
        var that = this;
        if (!$(this).parent().hasClass("remember-label")){
          $(this).parent().css("background-color", function() {
              return that.checked ? "#C0E9F7" : "";
          });
        }
    });
    $("body").on("click", "input[type=radio]" ,function() {
      $(this).parents().eq(1).siblings().css("backgroundColor","");
      $(this).parents().eq(1).css("backgroundColor","#C0E9F7");
    });
});

$("body").on("change", "input[type='checkbox'],input[type=radio]", function(event){
     // here you can check if this is check box or radio

        if($(this).is(":checkbox")) {
            // do this
        }else{
           // do for radios
        }

 });