javascript - jQuery:追加后无法选择新元素

标签 javascript jquery jquery-ui append appendchild

我使用 jQuery 创建了一个结构来表示 UI 树。我添加了在任何级别添加新元素的功能(当您选择要添加的级别时，“添加新”按钮将被激活)。

但在我的示例中，我无法向新创建的元素添加新元素。我尝试了不同的方法，但它不起作用。

我很高兴收到有关如何解决此问题的提示

$(function() {

  const newElement = $('#new-element');
  let targetButton;

  function indexOfChildren() {
    $('li').prepend(function() {
      let countOfChildren = $(this).children().find(">li").length;
      let targetSpan = $(this).find('button>:first-child');
      targetSpan.text(countOfChildren);
    });
  };
  indexOfChildren();

  $('li>button').on('focus', function(e) {
    targetButton = $(this);
    newElement.prop("disabled", false);
  });

  $('[name="new-button"]').on('click', function(e) {
    targetButton = $(this);
    newElement.prop("disabled", false);
  });


  newElement.click(function() {
    let name = prompt("Please enter name of new element");
    let parentTargetButton = targetButton.closest('li');
    let indexTargetSpan = parseInt(targetButton.find(':first-child').text());
    if (name != null) {
      if (indexTargetSpan == 0) {
        parentTargetButton.append('<ul><li><button class="btn mb-3 mt-1" name="new-button">' + name + '<span></span></button></li></ul>');
      } else {
        parentTargetButton.children('ul').append('<li><button class="btn mb-3 mt-1" name="new-button">' + name + ' <span></span></button></li>');
      }
    }
    indexOfChildren();
    targetButton.focus();
  });

});
body {
  background-color: #f5f6f8;
}

.main-content {
  background: #fff;
  box-shadow: 0 5px 20px 0 #c8d2dd6e;
  -webkit-box-shadow: 0 5px 20px 0 #c8d2dd6e;
  border-radius: 5px;
}

.top-level {
  border-bottom: 1px solid #dadee7;
}

ul {
  list-style-type: none;
}

ul>li>ul {
  border-left: 1px solid #eee;
  margin-left: 60px;
}

ul>li>ul>li:before {
  border-left: 1px solid;
}

#new-element {
  background-color: #33b5ff;
  color: #fff;
  border-radius: 40px;
}

.main-content .btn {
  box-sizing: content-box;
  width: 140px;
  padding: 14px;
  text-align: left;
  background-color: #f5f6f8;
  border-radius: 7px;
}

span {
  float: right;
  color: #fff;
  line-height: 1.4;
  border-radius: 0.8em;
  -moz-border-radius: 0.8em;
  -webkit-border-radius: 01em;
  text-align: center;
  font-size: 0.9em;
  width: 1.4em;
  background-color: #33b5ff;
}

.btn:focus,
.btn:hover,
#new-element {
  -webkit-box-shadow: 0 5px 25px 0 #9dabbb69;
  */ box-shadow: 0 5px 25px 0 #9dabbb69;
}

.main-content .btn:focus {
  color: #fff;
  background-color: #0095ff!important;
}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" integrity="sha384-rwoIResjU2yc3z8GV/NPeZWAv56rSmLldC3R/AZzGRnGxQQKnKkoFVhFQhNUwEyJ" crossorigin="anonymous">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<body>
  <div class="container project-item my-3 pt-5">
    <div class="row top-level pb-4">
      <h3 class="col-sm-9 pl-0">New Project</h3>
      <div class="col-sm-3 pr-0">
        <button type="button" class="btn float-right" id="new-element" disabled>+ Add new element</button>
      </div>
    </div>
  </div>
  <div class="container main-content pt-5 mt-5 pb-5">
    <ul>
      <li>
        <button class="btn mb-3 mt-1">Project <span></span></button>
        <ul>
          <li>
            <button class="btn mb-3 mt-1">Web Design <span></span></button>

            <ul>
              <li>
                <button class="btn mb-3 mt-1">CSS <span></span></button>
              </li>
              <li>
                <button class="btn mb-3 mt-1">HTML <span></span></button>
                <ul>
                  <li>
                    <button class="btn mb-3 mt-1">HTML <span></span></button>
                  </li>
                  <li>
                    <button class="btn mb-3 mt-1">XHTML <span></span></button>
                  </li>
                </ul>
              </li>
            </ul>

          </li>
        </ul>
      </li>
    </ul>

  </div>

</body>

最佳答案

您可以将 .on 事件绑定(bind)到已经存在的父元素。

$('li').on('focus', 'button', function(e) {
  targetButton = $(this);
  newElement.prop("disabled", false);
});


$(function() {

  const newElement = $('#new-element');
  let targetButton;

  function indexOfChildren() {
    $('li').prepend(function() {
      let countOfChildren = $(this).children().find(">li").length;
      let targetSpan = $(this).find('button>:first-child');
      targetSpan.text(countOfChildren);
    });
  };
  indexOfChildren();

  $('li').on('focus', 'button', function(e) {
    targetButton = $(this);
    newElement.prop("disabled", false);
  });

  $('[name="new-button"]').on('click', function(e) {
    targetButton = $(this);
    newElement.prop("disabled", false);
  });


  newElement.click(function() {
    let name = prompt("Please enter name of new element");
    let parentTargetButton = targetButton.closest('li');
    let indexTargetSpan = parseInt(targetButton.find(':first-child').text());
    if (name != null) {
      if (indexTargetSpan == 0) {
        parentTargetButton.append('<ul><li><button class="btn mb-3 mt-1" name="new-button">' + name + '<span></span></button></li></ul>');
      } else {
        parentTargetButton.children('ul').append('<li><button class="btn mb-3 mt-1" name="new-button">' + name + ' <span></span></button></li>');
      }
    }
    indexOfChildren();
    targetButton.focus();
  });

});
body {
  background-color: #f5f6f8;
}

.main-content {
  background: #fff;
  box-shadow: 0 5px 20px 0 #c8d2dd6e;
  -webkit-box-shadow: 0 5px 20px 0 #c8d2dd6e;
  border-radius: 5px;
}

.top-level {
  border-bottom: 1px solid #dadee7;
}

ul {
  list-style-type: none;
}

ul>li>ul {
  border-left: 1px solid #eee;
  margin-left: 60px;
}

ul>li>ul>li:before {
  border-left: 1px solid;
}

#new-element {
  background-color: #33b5ff;
  color: #fff;
  border-radius: 40px;
}

.main-content .btn {
  box-sizing: content-box;
  width: 140px;
  padding: 14px;
  text-align: left;
  background-color: #f5f6f8;
  border-radius: 7px;
}

span {
  float: right;
  color: #fff;
  line-height: 1.4;
  border-radius: 0.8em;
  -moz-border-radius: 0.8em;
  -webkit-border-radius: 01em;
  text-align: center;
  font-size: 0.9em;
  width: 1.4em;
  background-color: #33b5ff;
}

.btn:focus,
.btn:hover,
#new-element {
  -webkit-box-shadow: 0 5px 25px 0 #9dabbb69;
  */ box-shadow: 0 5px 25px 0 #9dabbb69;
}

.main-content .btn:focus {
  color: #fff;
  background-color: #0095ff!important;
}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" integrity="sha384-rwoIResjU2yc3z8GV/NPeZWAv56rSmLldC3R/AZzGRnGxQQKnKkoFVhFQhNUwEyJ" crossorigin="anonymous">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<body>
  <div class="container project-item my-3 pt-5">
    <div class="row top-level pb-4">
      <h3 class="col-sm-9 pl-0">New Project</h3>
      <div class="col-sm-3 pr-0">
        <button type="button" class="btn float-right" id="new-element" disabled>+ Add new element</button>
      </div>
    </div>
  </div>
  <div class="container main-content pt-5 mt-5 pb-5">
    <ul>
      <li>
        <button class="btn mb-3 mt-1">Project <span></span></button>
        <ul>
          <li>
            <button class="btn mb-3 mt-1">Web Design <span></span></button>

            <ul>
              <li>
                <button class="btn mb-3 mt-1">CSS <span></span></button>
              </li>
              <li>
                <button class="btn mb-3 mt-1">HTML <span></span></button>
                <ul>
                  <li>
                    <button class="btn mb-3 mt-1">HTML <span></span></button>
                  </li>
                  <li>
                    <button class="btn mb-3 mt-1">XHTML <span></span></button>
                  </li>
                </ul>
              </li>
            </ul>

          </li>
        </ul>
      </li>
    </ul>

  </div>

</body>

关于javascript - jQuery:追加后无法选择新元素，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/49600795/

上一篇：javascript - 在哪里存储私有(private) API key 以供普通 Javascript Azure Web 应用程序访问？没有 Web.config 或 C#

下一篇：javascript - RxJS 重试整个链

相关文章：

javascript - 具有多个作用域的 JQuery UI 可拖放？

javascript - 在 grunt browserify 中使用下划线模板

javascript - 尝试使用js代码清理错误的CSS规则

javascript - Codeigniter:AJAX调用后返回JSON数据但无法运行success: function()

javascript - 基于选项网格在 Javascript/jQuery 中创建递归函数

javascript - 如何使用 jQuery 的日期选择器突出显示日期

javascript - 使用 iOS Safari 网络浏览器的全屏 html5 视频

javascript - 如何在用于在网页中播放 .swf 的 Flash 播放器中使用控件？

jquery - 通过 jquery 在 Bootstrap 4 轮播上添加类 "active"，从 mongodb 加载数据时无法正常工作

jQuery - RCarousel 幻灯片 - 动态宽度？

©2024 IT工具网  联系我们