Question

当试图单击带有加号的div标签时，我试图使用jQuery函数添加两个div标签。这项工作做得很好，但是，如果我想通过按下由jQuery函数创建的div标签以在html中建立树形结构来添加其他div元素，就会有些困惑。

初始div结构：

<div class="left_navigation">
  <div class="row" id="header_orange">
    <div class="header_line">
      <div class="header_color" id="background_orange">
        <div class="header_prespace_lv1">
          <div class="header_given" id="orange">
            <div class="header_plus" id="orange">(+)</div>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>

jQuery函数1：

$(".header_plus#orange").click(function() {

       $(".row#header_orange").after('<div class="row" id="attribute_lv1_orange"><div class="attribute_lv1_line"><div class="attribute_lv1_color" id="background_orange"></div><div class="attribute_lv1_prespace_lv1"></div><div class="attribute_lv1_given"id="orange"><input class="new_attribute_text_lv1_orange" id="orange" type="text" value="New Attribute" onclick="changeContent()"></text></div><div class="attribute_lv1_plus"id="orange"><p>+</p></div></div></div>');

       $(".blank_orange").after('<div class="row" id="testdata"><div class="testcase_data"><input class="new_data_input" type="text" value="+" onclick="changeContent()"></text></div></div>');

   });

现在，我想按下（）新创建的div标签的加号并添加另一组元素：

$(".attribute_lv1_plus#orange").click(function() {

       $(".row#attribute_lv1_orange").after('<div class="row" id="attribute_lv2_orange"><div class="attribute_lv2_line"><div class="attribute_lv2_color" id="background_orange"></div><div class="attribute_lv2_prespace_lv2"></div><div class="attribute_lv2_given"id="orange"><input class="new_attribute_text_lv2_orange" id="orange" type="text" value="New Attribute" onclick="changeContent()"></text></div><div class="attribute_lv2_plus"id="orange"><p>+</p></div></div></div>');

       $(".blank_orange").after('<div class="row" id="testdata"><div class="testcase_data"><input class="new_data_input" type="text" value="+" onclick="changeContent()"></text></div></div>');

   });

但是它不起作用，当我包含attribute_lv1结构时，它起作用了，但是当我想顺序添加元素组时，它不起作用。有没有可能解决此问题的解决方法？

Answer 1

问题在于，您正在为当前不存在的元素创建点击事件。创建元素后创建点击事件将达到目的：

$(".header_plus#orange").click(function() {
  var id_1v1 = new Date();
  $(".row#header_orange").after('<div class="row 1v1" id="' + id_1v1.getTime() +'">' +
    '<div class="attribute_lv1_line"><div class="attribute_lv1_color" id="background_orange"></div>' +
    '<div class="attribute_lv1_prespace_lv1"></div>' +
    '<div class="attribute_lv1_given orange"><input class="new_attribute_text_lv1_orange orange" type="text" value="New Attribute" onclick="changeContent()"></text></div>' +
    '<div class="attribute_lv1_plus orange" data-target="' + id_1v1.getTime() + '"><p>+</p></div></div></div>');

  $(".blank_orange").after('<div class="row"><div class="testcase_data"><input class="new_data_input" type="text" value="+" onclick="changeContent()"></text></div></div>');

  $(".attribute_lv1_plus").click(function() {
    var id_1v2 = new Date();
    $('#'+$(this).data('target')).after('<div class="row v2" id="' + id_1v2.getTime() + '">' +
      '<div class="attribute_lv2_line"><div class="attribute_lv2_color" id="background_orange"></div>' +
      '<div class="attribute_lv2_prespace_lv2"></div>' +
      '<div class="attribute_lv2_given orange"><input class="new_attribute_text_lv2_orange orange" type="text" value="New Attribute" onclick="changeContent()"></text></div>' +
      '<div class="attribute_lv2_plus orange" data-target="' + id_1v2.getTime() + '"><p>+</p></div></div></div>');

    $(".blank_orange").after('<div class="row" id="testdata"><div class="testcase_data"><input class="new_data_input" type="text" value="+" onclick="changeContent()"></text></div></div>');
    
    $(".attribute_lv2_plus").click(function() {
      var id_1v3 = new Date();
      $('#'+$(this).data('target')).after('<div class="row v3" id="' + id_1v3.getTime() + '">' +
        '<div class="attribute_lv3_line"><div class="attribute_lv2_color" id="background_orange"></div>' +
        '<div class="attribute_lv3_prespace_lv2"></div>' +
        '<div class="attribute_lv3_given orange"><input class="new_attribute_text_lv2_orange orange" type="text" value="New Attribute" onclick="changeContent()"></text></div><p></p></div></div>');

      $(".blank_orange").after('<div class="row" id="testdata"><div class="testcase_data"><input class="new_data_input" type="text" value="+" onclick="changeContent()"></text></div></div>');

    });
  });
});

.v2 {
  margin-left: 20px;
}
.v3 {
  margin-left: 40px;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="left_navigation">
  <div class="row" id="header_orange">
    <div class="header_line">
      <div class="header_color" id="background_orange">
        <div class="header_prespace_lv1">
          <div class="header_given" id="orange">
            <div class="header_plus" id="orange">(+)</div>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>

请注意，您必须使用唯一的ID。在这种情况下，我使用new Date()和getTime()生成唯一的ID。

使用jQuery创建多层div元素结构

1 个答案: