Question

我有一个基本的jQuery脚本，它将新的div附加到UL元素中。点击自定义的“添加任务”按钮后，新的div将添加到UL区域的底部。对于每个新添加的项目，我希望该项目具有切换功能，该功能在下方显示隐藏的div。基本上，这是一个待办事项清单。我想添加一个新项目，并有一个详细信息按钮，您可以按一下该按钮，该按钮将在下方显示一个类似于手风琴工作原理的区域。我所有的脚本都在工作，append函数将新创建的div递增以赋予它们唯一的ID。问题是这样的：当我附加任务1时，它是可折叠的；当我附加任务2时，任务2是可折叠的，但是任务1失去了它的可折叠性。基本上只有一个问题，就是要确保每个附加项目都具有功能良好的手风琴/细节部分。

$(document).ready(function() {
  let i = 0;

  $('#add').on('click', () => {
    $('ul').append(
      '<div class="divvy">' +
      '<input type="text" class="inputty"/><button class="remove" id="deletestyle"> X </button>' +
      '<div class="detailcontainer" id="accordion' + i + '"> <p>DETAILS</p></div><div id="panel' + i + '">' +
      '<label for="details">Details</label><textarea name="details" rows="10" cols="30" ></textarea><br><label for="date">Due Date</label><input type="date" name="date"></div></div>');

    i++;

    $('#accordion0').on('click', () => {
      $('#panel0').toggle();
    });

    $('#accordion1').on('click', () => {
      $('#panel1').toggle();
    });
  });
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="container">
  <div class="optionBox">
    <button class="btn btn-primary" id="add">ADD TASK</button>
    <ul id="sortable">
    </ul>
  </div>
</div>

Answer 1

问题是因为您要嵌套事件处理程序。在按钮的第二次单击上，您已经向div添加了两个事件处理程序，因此toggle()被单击了两次并显示然后立即再次隐藏该元素。

要解决此问题并改善逻辑，请删除增量的id属性，而是根据应用于元素的类使用单个委托的事件处理程序，如下所示：

$(document).ready(function() {
  $('#add').on('click', () => {
    $('ul').append(
      '<div class="divvy">' +
      '<input type="text" class="inputty"/><button class="remove" id="deletestyle"> X </button>' +
      '<div class="detailcontainer"> <p>DETAILS</p></div><div class="panel">' +
      '<label for="details">Details</label><textarea name="details" rows="10" cols="30" ></textarea><br><label for="date">Due Date</label><input type="date" name="date"></div></div>');
  });

  $('ul').on('click', '.detailcontainer', function() {
    $(this).closest('.divvy').find('.panel').toggle();
  });
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="container">
  <div class="optionBox">
    <button class="btn btn-primary" id="add">ADD TASK</button>
    <ul id="sortable"></ul>
  </div>
</div>

新添加的商品会导致之前添加的商品失去切换功能

1 个答案: