jQuery on（“click”）没有触发

Question

我有这个谱系树，从用户开始（下面是jsFiddle）。

这个用户有2个选项（一个工作，另一个工作暂时不工作），其中一个（+）打开一个popUp：添加一个“couple”，添加一个“child”并添加一个“parent” ”

添加子项会在父项下创建一个新子项，并使用相同的选项。

对于儿童和情侣，代码可以使用jQuery中的.on("click")方法完美地运行，但是当选择“父”选项时，这些选项不会触发.on("click")方法。

这个谱系树来自互联网。如果此元素具有子元素，则<ul>具有<li> foreach元素，并在<ul>内嵌套<li>。因此，如果我添加父级，我会将所有现有的<ul>包装到新的<li>中，然后将其包装到新的<ul>中。

代码：jsFiddle

希望你能帮助我理解为什么父母.on("click")不会像孩子一样触发。

Answer 1

您的绑定不正确，请更改行

$("li").on("click", ".anadir", function() {

到

$(".tree").on("click", ".anadir", function() {

<强> Working Demo

Answer 2

问题是您将点击处理程序绑定到li中的.tree元素，但添加了一个父元素，您正在创建一个新的li元素，该元素没有委托点击处理程序。

当您使用针对多个元素的事件委派时，您需要将处理程序绑定到注册处理程序时存在于dom中的公共祖先

$('.tree').on("click", ".anadir", function() {});

$(document).ready(function() {
  $('.tree').on("click", ".anadir", function() {
    //con
    $(".popUp").fadeIn();
    if ($(this).parent().parent().hasClass("top")) {
      $(".parentShow").show();
    } else {
      $(".parentShow").hide();
    }
    var id = $(this).parent().parent().attr("id");
    $("input[name='id']").val(id);
    console.log($("input[name='id']").val());
  });
  $(".popUp").click(function() {
    $(this).fadeOut();
  });
  $("#add").on("click", function() {
    //Obtain max id
    var max = 0;
    $("li").each(function() {
      if ($(this).attr("id") > max)
        max = $(this).attr("id");
    });
    max++;
    var type = $("input[name='add']:checked").val();
    var name = $("input[type='text']").val();
    var id = $("input[name='id']").val();
    console.log("id:" + id);

    if (type == "child") {
      if ($("#" + id).children("ul").length > 0) {
        console.log("a");
        $("#" + id).children("ul").append("<li id='" + max + "'><a href='#'><div class='user'>" + name + "</div><span class='couple'></span><div class='clear'></div><span class='anadir option'>+</span> <span class='restar option'>-</span></a></li>");
      } else {
        console.log("b");
        $("#" + id).append("<ul><li id='" + max + "'><a href='#'><div class='user'>" + name + "</div><span class='couple'></span><div class='clear'></div><span class='anadir option'>+</span> <span class='restar option'>-</span></a></li></ul>");
      }
    } else if (type == "couple") {
      $("#" + id + " a .couple").first().html("<div class='user'>" + name + "</div>");
    } else if (type == "parent") {
      $("#" + id).removeClass("top");
      $("#" + id).parent().wrap("<ul></ul>");
      $("#" + id).parent().wrap("<li id='" + max + "' class='top'></li>");
      $("#" + max).prepend("<a href='#'><div class='user'>" + name + "</div><span class='couple'></span><div class='clear'></div><span class='anadir option'>+</span><span class='restar option'>-</span></a>");
    }
    $(".popUp").fadeOut();
  });
  $(".popUp *").click(function(e) {
    e.stopPropagation();
  });
});

/*Now the CSS*/

* {
  margin: 0;
  padding: 0;
}
.tree ul {
  padding-top: 20px;
  position: relative;
}
.tree li {
  float: left;
  text-align: center;
  list-style-type: none;
  position: relative;
  padding: 20px 5px 0 5px;
}
/*We will use ::before and ::after to draw the connectors*/

.tree li::before,
.tree li::after {
  content: '';
  position: absolute;
  top: 0;
  right: 50%;
  border-top: 1px solid #ccc;
  width: 50%;
  height: 20px;
}
.tree li::after {
  right: auto;
  left: 50%;
  border-left: 1px solid #ccc;
}
/*We need to remove left-right connectors from elements without 
any siblings*/

.tree li:only-child::after,
.tree li:only-child::before {
  display: none;
}
/*Remove space from the top of single children*/

.tree li:only-child {
  padding-top: 0;
}
/*Remove left connector from first child and 
right connector from last child*/

.tree li:first-child::before,
.tree li:last-child::after {
  border: 0 none;
}
/*Adding back the vertical connector to the last nodes*/

.tree li:last-child::before {
  border-right: 1px solid #ccc;
  border-radius: 0 5px 0 0;
  -webkit-border-radius: 0 5px 0 0;
  -moz-border-radius: 0 5px 0 0;
}
.tree li:first-child::after {
  border-radius: 5px 0 0 0;
  -webkit-border-radius: 5px 0 0 0;
  -moz-border-radius: 5px 0 0 0;
}
/*Time to add downward connectors from parents*/

.tree ul ul::before {
  content: '';
  position: absolute;
  top: 0;
  left: 50%;
  border-left: 1px solid #ccc;
  width: 0;
  height: 20px;
}
.tree li a {
  border: 1px solid #ccc;
  padding: 5px 10px;
  text-decoration: none;
  color: #666;
  font-family: arial, verdana, tahoma;
  font-size: 11px;
  display: inline-block;
  border-radius: 5px;
  -webkit-border-radius: 5px;
  -moz-border-radius: 5px;
  transition: all 0.5s;
  -webkit-transition: all 0.5s;
  -moz-transition: all 0.5s;
}
/*Time for some hover effects*/

/*We will apply the hover effect the the lineage of the element also*/

.tree li a:hover,
.tree li a:hover+ul li a {
  background: #c8e4f8;
  color: #000;
  border: 1px solid #94a0b4;
}
/*Connector styles on hover*/

.tree li a:hover+ul li::after,
.tree li a:hover+ul li::before,
.tree li a:hover+ul::before,
.tree li a:hover+ul ul::before {
  border-color: #94a0b4;
}
/*Thats all. I hope you enjoyed it.
Thanks :)*/

.user {
  width: 50px;
  height: 50px;
  background: red;
  border: 1px solid #ccc;
  border-radius: 25px;
  margin: 10px;
  text-align: center;
  color: #fff;
  line-height: 50px;
  margin: 10px;
  display: block;
  float: left;
}
.clear {
  clear: both;
}
.start {
  background: #aaaaff;
}
.option {
  margin: 0 10px;
}
.popUp {
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, .5);
  position: absolute;
  top: 0;
  left: 0;
  display: none;
}
.popUpBox {
  width: 600px;
  height: auto;
  position: relative;
  top: 100px;
  margin: auto;
}
.boxTitle {
  background-color: #fff;
  border-bottom: 1px solid #ccc;
  padding: 10px;
}
.boxMessage {
  padding: 10px;
  background-color: #fff;
}
.add table {
  border-collapse: collapse;
  width: 100%;
}
.add table tr td {
  width: 50%;
  padding: 3px 10px;
  border: 1px solid #ccc;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class="tree">
  <ul>
    <li id="0" class="top">
      <a href="#" class="start">
        <div class="user">Sergi</div>
        <span class="couple"></span>
        <div class="clear"></div>
        <span class="anadir option">+</span>
        <span class="restar option">-</span>
      </a>
    </li>
  </ul>
</div>
<div class="popUp">
  <div class="popUpBox">
    <h2 class="boxTitle">Tree options</h2>
    <div class="boxMessage">
      <div class="add">
        <b>Add</b>
        <table>
          <tbody>
            <tr>
              <td>
                <input type="radio" name="add" value="couple" checked="">Couple</td>
              <td>Name:
                <input type="text">
              </td>
            </tr>
            <tr>
              <td colspan="2">
                <input type="radio" name="add" value="child">Child</td>
            </tr>
            <tr class="parentShow">
              <td colspan="2">
                <input type="radio" name="add" value="parent">Parent</td>
            </tr>
            <tr>
              <input type="hidden" name="id" value="0">
              <td colspan="2" style="text-align: right;"><span><button id="add" style="padding: 3px 10px;">Add</button></span>
              </td>
            </tr>
          </tbody>
        </table>
      </div>
    </div>
  </div>
</div>

Answer 3

检查DEMO

$(document).ready(function() {
$(document).on("click", ".anadir", function() {
    $(".popUp").fadeIn();
    if($(this).parent().parent().hasClass("top")) {
        $(".parentShow").show();
    }
    else {
        $(".parentShow").hide();
    }
    var id = $(this).parent().parent().attr("id");
    $("input[name='id']").val(id);
    console.log($("input[name='id']").val());
});