javascript - 如何处理动态引导卡的jquery创建？

Question

我正在尝试创建一个有趣的游戏。用户可以输入他的姓名和电子邮件。单击“添加”按钮后，将使用包含复选框 “一”和“二”的表单创建新卡。根据复选框的选择，用户可以选择 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>

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

标签： javascriptjqueryhtml

Answer 1

另一个答案通过更改 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>