Question

我有一个小问题。我有一个主要类别，包含一行复选框。在这个主要类别中，我有一个按钮添加部分，它在上面的行下添加了另一行复选框，并在每次单击添加部分后继续添加另一行复选框。

在盒子外面，我有一个主按钮，允许添加另一个主类别。原理是一样的，它添加了一行复选框，然后是另一个部分按钮。如果我想在此类别中再次添加另一行，我只需点击Add Section按钮即可。

我遇到的问题是，我无法在点击Add section按钮时添加另一行。此外，我想验证第二行复选框和自己的as，这样如果我检查第二行中的第一个复选框，我应该能够检查第三行中的第一个复选框。

主类别中的第一行复选框独立于第二行复选框和向前行（即添加部分时创建的行

我已完成验证，如：https://jsfiddle.net/fL3hekhw/

已编辑

演示是：https://jsfiddle.net/fL3hekhw/

当我单击框中的“添加部分”按钮时，不应该复制其他框中添加的复选框。我怎么能阻止这个？请帮忙。

有人可以帮我这个吗？我完全陷入困境。

Answer 1

您链接的the demo存在一些问题。

您要求的是.closest('.js-cars-items')，但您只使用.js-cars-item作为班级
当您添加新复选框时，您将重新使用ID，这些ID在整个文档中必须是唯一的
当您添加新类别时，您没有注册更改＆＃39;使用您附加的新.cars元素的事件侦听器

我做了一些小的重构，希望让代码更容易阅读。我也完全删除了麻烦的.closest('.js-cars-items')电话，因为你已经在.js-cars-item上进行了迭代。

所有

＆＃13;

let nextSection = 4;
const carsItemSelector = '.js-cars-item [type="checkbox"]';

function registerValidation() {
  $(".main").on("change", carsItemSelector, validateCategorySelection);
}

function validateCategorySelection() {
  const idx = $(this).closest('li').index(); //Get the index - Number in order
  const chk = $(this).is(":checked"); //Get if checked or not
  const obj = this; //Checkbox object

  $('.js-cars-item').each(function() { //Loop every js-cars-item
    //Find the checkbox with the same index of clicked checkbox. Change disabled property
    $(this).find('li:eq(' + idx + ')')
           .find('[type="checkbox"]')
           .not(obj)
           .prop("checked", false);
  });

  var checkeds = [];
  $(".cars-item input:checkbox:checked").each(function(index) {
    checkeds[index] = $(this).attr('id');
  });
  console.clear();
  console.log("These are checked:", checkeds);
}

function checkbox(index, section) {
  return `
    <li>
      <input type="checkbox" id="car-${index}-${section}">
      <label for="car-${index}-${section}"><i class="icon-tick"></i></label>
    </li>
  `;
}

registerValidation();
$('.js-add-category').click(function() {
  const section = nextSection;
  nextSection++;
  var categoryContent =
    `<div class="cars">
    <div class="cars-item js-cars-item">
      <ul>
        ${[1, 2, 3].map(i => checkbox(i, section)).join('\n')}
      </ul>
    </div>

    <button type="button" class="js-add-section">Add Section</button>
  </div>
  <br>`

  $('.main').append(categoryContent);
  // registerValidation();
});

$(document.body).on('click', 'button.js-add-section', function() {
  const section = nextSection;
  nextSection++;
  var sectionContent =
    `<div class="cars-item js-cars-item">
    <ul>
        ${[1, 2, 3].map(i => checkbox(i, section)).join('\n')}
    </ul>
  </div>`
  $(this).closest('.cars').append(sectionContent);
});

＆＃13;

.cars-item {
  border-bottom: 1px solid gray;
}

ul {
  /* Added to fully show console in snippet */
  margin: 2px;
}

li {
  display: inline;
}

.cars {
  box-sizing: content-box;
  width: 250px;
  height: auto;
  padding: 10px;
  border: 5px solid blue;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button type="button" class="js-add-category">Add Category</button> <br> <br>

<div class="main">

  <div class="cars">

    <div class="cars-item js-cars-item">
      <ul>
        <li>
          <input type="checkbox" id="car-1-3">
          <label for="car-1-3"><i class="icon-tick"></i></label>
        </li>
        <li>
          <input type="checkbox" id="car-2-3">
          <label for="car-2-3"><i class="icon-tick"></i></label>
        </li>
        <li>
          <input type="checkbox" id="car-3-3">
          <label for="car-3-3"><i class="icon-tick"></i></label>
        </li>
      </ul>
    </div>



    <button type="button" class="js-add-section">Add Section</button>
  </div>
  <br>



  <br>

＆＃13;

Answer 2

我不确定，但我怀疑问题来自于没有在创建的按钮上捕获点击事件，对吗？

如果要监听文档加载后添加的元素上的事件，请不要使用.change（）但使用$（document）.on（'eventName'，'elementName'，callbackFunction）;

在这里阅读更多内容：

Event handler not working on dynamic content

在jquery和验证检查中动态添加复选框

2 个答案: