如何处理动态引导卡的jQuery创建？

Question

我正在尝试创建一个有趣的游戏。 用户可以输入他的姓名和电子邮件。 单击“添加” 按钮后，将创建新卡，其格式为 复选框 “一个” 和“ Two” 。根据复选框的选择，用户可以在1到2个字段集之间进行选择。这些字段集将在最初被禁用。 但是由于jquery代码上的错误，新创建的卡作为已启用的字段集出现。

$(document).ready(function() {

  $(".oneFieldset").prop('disabled', true);
  $(".twoFieldset").prop('disabled', true);

  $("#add").click(function() {

    var name = $("#name").val();
    var email = $("#email").val();

    var htmlcard = "<div class='card px-3'><div class='card-header'>" + name + "|" + email + "</div><div class='card-body'><div class='card-title'><div class='form-check form-check-inline'><input class='form-check-input one' type='checkbox' value='one'><br><label class='form-check-label' for='one'>One</label></div><div class='form-check form-check-inline'><input class='form-check-input two' type='checkbox' value='two'><label class='form-check-label' for='two'>Two</label></div></div><form><div class='row'><div class='col-md-4'><fieldset class='oneFieldset'><legend>1</legend><label for='NoOne' class='col-form-label'>Choose</label><select class='form-control w-30' id='NoOne' placeholder='Choose'><option value='a'>A</option><option value='b'>B</option><option value='c'>C</option></select></fieldset></div><div class='col-md-8'><fieldset class='twoFieldset'><legend>2</legend><div class='row'><div class='form-group col'><label for='NoTwo' class='col-form-label'>Select Package Amount</label><select class='form-control w-30' id='NoTwo' placeholder='Choose'><option value='a'>A</option><option value='b'>B</option><option value='c'>C</option></select></div><div class='form-group col'><label for='NoThree' class='col-form-label'>Select Package Amount</label><select class='form-control w-30' id='NoThree' placeholder='Choose'><option value='x'>X</option><option value='y'>Y</option><option value='z'>Z</option></select></div></div></fieldset></div></div></form><br><a href='#' class='btn btn-primary btn-lg'>Choose</a></div></div>";

    $("body").append(htmlcard);

  });

  $(".one").change(function() {
    if (this.checked) {
      $(".oneFieldset").prop('disabled', false);
    }
    if (this.checked == false) {
      $(".oneFieldset").prop('disabled', true);
    }
  });

  $(".two").change(function() {
    if (this.checked) {
      $(".twoFieldset").prop('disabled', false);
    }
    if (this.checked == false) {
      $(".twoFieldset").prop('disabled', true);
    }
  });

});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="container-fluid">
  <form class="form-control my-3 mx-auto w-50">
    <label for="username">Enter username</label>
    <input type="text" name="username" class="form-control" id="name"><br>
    <label for="email">Enter email</label>
    <input type="email" name="email" class="form-control" id="email"><br>
    <a href="#" id="add" class="btn btn-primary mb-3 btn-lg">Add</a>
  </form>
</div>
<div class="card px-3">
  <div class="card-header">
    Choose something
  </div>
  <div class="card-body">
    <div class="card-title">
      <div class="form-check form-check-inline">
        <input class="form-check-input one" type="checkbox" value="one">
        <br>
        <label class="form-check-label" for="one">One</label>
      </div>
      <div class="form-check form-check-inline">
        <input class="form-check-input two" type="checkbox" value="two">
        <label class="form-check-label" for="two">Two</label>
      </div>
    </div>
    <form>
      <div class="row">
        <div class="col-md-4">
          <fieldset class="oneFieldset">
            <legend>1</legend>
            <label for="NoOne" class="col-form-label">Choose</label>
            <select class="form-control w-30" id="NoOne" placeholder="Choose">
              <option value="a">A</option>
              <option value="b">B</option>
              <option value="c">C</option>
            </select>
          </fieldset>
        </div>
        <div class="col-md-8">
          <fieldset class="twoFieldset">
            <legend>2</legend>
            <div class="row">
              <div class="form-group col">
                <label for="NoTwo" class="col-form-label">Select Package Amount</label>
                <select class="form-control w-30" id="NoTwo" placeholder="Choose">
                  <option value="a">A</option>
                  <option value="b">B</option>
                  <option value="c">C</option>
                </select>
              </div>
              <div class="form-group col">
                <label for="NoThree" class="col-form-label">Select Package Amount</label>
                <select class="form-control w-30" id="NoThree" placeholder="Choose">
                  <option value="x">X</option>
                  <option value="y">Y</option>
                  <option value="z">Z</option>
                </select>
              </div>
            </div>
          </fieldset>
        </div>
      </div>
    </form>
    <br>
    <a href="#" class="btn btn-primary btn-lg">Choose</a>
  </div>
</div>
<br>

我的想法可能有问题。请指出。 提前谢谢。

Answer 1

HTML字段的新值必须在附加之前设置

据我了解，您正在尝试将“金额”后的字段初始化为off，如果这样的话：

在htmlcard中创建的“选择”中设置“已禁用” 在jquery中创建的新html实例未设置为禁用状态

<select disabled class='form-control w-30' id='NoTwo' placeholder='Choose'>

检查在here中工作的笔

Answer 2

另一个答案是通过更改HTML来解决的。

在第一次加载时，您致电：

$(".oneFieldset").prop('disabled', true);
$(".twoFieldset").prop('disabled', true);

添加新的HTML后，您可以进行相同的调用（稍作调整）：

var htmlcard = "<div class='card px-3'>...";
var newcard = $(htmlcard).appendTo("body");
newcard.find(".oneFieldset").prop('disabled', true);
newcard.find(".twoFieldset").prop('disabled', true);

---

这将带您进入下一个问题-动态添加的元素上的事件绑定-您可以通过在添加html时添加事件处理程序来解决此问题，也可以将事件委托与树导航一起使用，以仅更改相关的字段集：

  $(document).on("change", ".one", function() {
    $(this).closest(".card").find(".oneFieldset").prop("disabled", !this.checked);
  });

$(document).ready(function() {

  $(".oneFieldset").prop('disabled', true);
  $(".twoFieldset").prop('disabled', true);

  $("#add").click(function() {

    var name = $("#name").val();
    var email = $("#email").val();

    var htmlcard = "<div class='card px-3'><div class='card-header'>" + name + "|" + email + "</div><div class='card-body'><div class='card-title'><div class='form-check form-check-inline'><input class='form-check-input one' type='checkbox' value='one'><br><label class='form-check-label' for='one'>One</label></div><div class='form-check form-check-inline'><input class='form-check-input two' type='checkbox' value='two'><label class='form-check-label' for='two'>Two</label></div></div><form><div class='row'><div class='col-md-4'><fieldset class='oneFieldset'><legend>1</legend><label for='NoOne' class='col-form-label'>Choose</label><select class='form-control w-30' id='NoOne' placeholder='Choose'><option value='a'>A</option><option value='b'>B</option><option value='c'>C</option></select></fieldset></div><div class='col-md-8'><fieldset class='twoFieldset'><legend>2</legend><div class='row'><div class='form-group col'><label for='NoTwo' class='col-form-label'>Select Package Amount</label><select class='form-control w-30' id='NoTwo' placeholder='Choose'><option value='a'>A</option><option value='b'>B</option><option value='c'>C</option></select></div><div class='form-group col'><label for='NoThree' class='col-form-label'>Select Package Amount</label><select class='form-control w-30' id='NoThree' placeholder='Choose'><option value='x'>X</option><option value='y'>Y</option><option value='z'>Z</option></select></div></div></fieldset></div></div></form><br><a href='#' class='btn btn-primary btn-lg'>Choose</a></div></div>";

    var newcard = $(htmlcard).appendTo("body");
    newcard.find(".oneFieldset").prop('disabled', true);
    newcard.find(".twoFieldset").prop('disabled', true);

  });

  $(document).on("change", ".one", function() {
    $(this).closest(".card").find(".oneFieldset").prop("disabled", !this.checked);
  });

  $(document).on("change", ".two", function() {
    $(this).closest(".card").find(".twoFieldset").prop("disabled", !this.checked);
  });

});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="container-fluid">
  <form class="form-control my-3 mx-auto w-50">
    <label for="username">Enter username</label>
    <input type="text" name="username" class="form-control" id="name"><br>
    <label for="email">Enter email</label>
    <input type="email" name="email" class="form-control" id="email"><br>
    <a href="#" id="add" class="btn btn-primary mb-3 btn-lg">Add</a>
  </form>
</div>
<div class="card px-3">
  <div class="card-header">
    Choose something
  </div>
  <div class="card-body">
    <div class="card-title">
      <div class="form-check form-check-inline">
        <input class="form-check-input one" type="checkbox" value="one">
        <br>
        <label class="form-check-label" for="one">One</label>
      </div>
      <div class="form-check form-check-inline">
        <input class="form-check-input two" type="checkbox" value="two">
        <label class="form-check-label" for="two">Two</label>
      </div>
    </div>
    <form>
      <div class="row">
        <div class="col-md-4">
          <fieldset class="oneFieldset">
            <legend>1</legend>
            <label for="NoOne" class="col-form-label">Choose</label>
            <select class="form-control w-30" id="NoOne" placeholder="Choose">
              <option value="a">A</option>
              <option value="b">B</option>
              <option value="c">C</option>
            </select>
          </fieldset>
        </div>
        <div class="col-md-8">
          <fieldset class="twoFieldset">
            <legend>2</legend>
            <div class="row">
              <div class="form-group col">
                <label for="NoTwo" class="col-form-label">Select Package Amount</label>
                <select class="form-control w-30" id="NoTwo" placeholder="Choose">
                  <option value="a">A</option>
                  <option value="b">B</option>
                  <option value="c">C</option>
                </select>
              </div>
              <div class="form-group col">
                <label for="NoThree" class="col-form-label">Select Package Amount</label>
                <select class="form-control w-30" id="NoThree" placeholder="Choose">
                  <option value="x">X</option>
                  <option value="y">Y</option>
                  <option value="z">Z</option>
                </select>
              </div>
            </div>
          </fieldset>
        </div>
      </div>
    </form>
    <br>
    <a href="#" class="btn btn-primary btn-lg">Choose</a>
  </div>
</div>
<br>