从JS文字模板动态生成的输入字段：输入值不显示

Question

我已经解决了这个问题，我将不胜感激-可能很明显，但是暂时我看不到有什么问题。

某些上下文：

我正在以描述一个人的形式动态添加“一组”字段。 对于整个新条目，这些字段可以为空，或者用户可以从我在div中显示的现有人员（称为来宾）列表中进行选择。 用户可以单击这些来宾div中的每个div并添加具有已设置输入值的组输入的新行。

这是我遇到的问题。我能够添加新的组输入行，并且输入已设置了它们的值，但是该值未显示在输入字段内。

JSFiddle链接：https://jsfiddle.net/joomquery/odgp2wre

预先感谢

(function($) {
  $(document).ready(function() {

    let passengersRows = $('.booking-passenger-entry');
    let passengersRowsI = passengersRows.length;

    $('.add-guest-as-passenger').on('click', function() {
      let passengerData = {};
      console.clear();
      console.log(this);
      passengerData.guestid = $(this).attr('data-guestid');
      passengerData.passengerid = 0;
      passengerData.lastname = $(this).attr('data-lastname');
      passengerData.firstname = $(this).attr('data-firstname');
      passengerData.passportid = $(this).attr('data-passportid');
      passengerData.age = $(this).attr('data-age');
      passengerData.gender = $(this).attr('data-gender');

      addPassenger(passengerData);
    });

    function addPassenger(passenger) {
      passengersRowsI++;
      let i = passengersRowsI;
      let container = $('#passengers-container');
      let genderSelectOptionA = `<option value="0">Unspecified</option>`;
      let genderSelectOptionB = `<option value="1">Male</option>`;
      let genderSelectOptionC = `<option value="2">Female</option>`;
      if (passenger.gender == 'Male') {
        genderSelectOptionB = `<option value="1" selected>Male</option>`;
      } else if (passenger.gender == 'Female') {
        genderSelectOptionC = `<option value="2" selected>Female</option>`;
      }
      console.clear();
      console.log(passenger);
      let passengerTemplate = `
<div class="row-fluid booking-passenger-entry inputform" id="passengers-container-${i}" data-guestid="${passenger.guestid}" data-passengerid="">
  <input type="text" required id="input-name-last-${i}" name="passengers[${i}][name-last]" class="span3 b-guest-i input name-last" placeholder="Last name" val="John" >
  <input type="text" required id="input-name-first-${i}" name="passengers[${i}][name-first]" class="span3 b-guest-i input name-first" placeholder="First name" val="${passenger.firstname}" >
  <input type="text" required id="input-passport-${i}" name="passengers[${i}][passport]" class="span2 b-guest-i input passport" placeholder="Passport ID" val="${passenger.passportid}" >
  <input type="text" required id="input-age-${i}" name="passengers[${i}][age]" class="span1 b-guest-i input age" placeholder="Age" val="${passenger.age}" >
  <select id="input-gender-${i}" required name="passengers[${i}][gender]" class="span2 b-guest-i input gender">
    ${genderSelectOptionA}
    ${genderSelectOptionB}
    ${genderSelectOptionC}
  </select>
  <div class="btn-group span1 pull-right">
	  <div id="passenger-delete-${i}" class="btn btn-danger"><i class="fa fa-minus-circle" aria-hidden="true"></i></div>
  </div>
  <input type="hidden" id="input-passengerid-${i}" name="passengers[${i}][passengerid]" class="hidden b-guest-i input" val="" >
  <input type="hidden" id="input-guestid-${i}" name="passengers[${i}][guestid]" class="hidden b-guest-i input" val="${passenger.guestid}" >
</div>`;
      $(container).append(passengerTemplate);

    }

  });
})(jQuery);

.booking-passenger-entry {
    padding: 0.3125rem 0;
}
.booking-guest {
  margin: 1px 0;
  padding: 0.3125rem !important;
  line-height: 1rem;
  cursor: pointer;
  border-right: 1px solid #ddd;
  border-bottom: 1px solid #ddd;
  border-left: 1px solid #ddd;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<div id="booking-passengers" class="row-fluid req-passengers" style="">
  <div class="controls">
    <div class="passengerlist">
      <h3>Dynamic guestlist:</h3>
      <div class="row-fluid booking-guest booking-guest-headings">
        <span class="span3 b-guest-i b-guest-h name-last">Last name</span>
        <span class="span3 b-guest-i b-guest-h name-first">First name</span>
        <span class="span2 b-guest-i b-guest-h passport">Passport ID</span>
        <span class="span1 b-guest-i b-guest-h age">Age</span>
        <span class="span2 b-guest-i b-guest-h gender">Gender</span>
      </div>

      <div id="passengers-container" class="passengers-container" style="border:1px solid #aaa; min-height: 30px; background: #fafafa;">
      </div>

      <div class="guestlist">
        <h3>You may add passengers from your booking's guestlist</h3>
        <div class="row-fluid booking-guest booking-guest-headings">
          <span class="span3 b-guest-i b-guest-h name-last">Last name</span>
          <span class="span3 b-guest-i b-guest-h name-first">First name</span>
          <span class="span3 b-guest-i b-guest-h passport">Passport ID</span>
          <span class="span1 b-guest-i b-guest-h age">Age</span>
          <span class="span2 b-guest-i b-guest-h gender">Gender</span>
        </div>
        <div class="row-fluid booking-guest add-guest-as-passenger" id="booking-guest-8" data-guestid="8" data-passengerid="0" data-firstname="SomeoneF1" data-lastname="SomeoneL1" data-passportid="XX2255551" data-age="43" data-gender="Male">
          <span class="span3 b-guest-i name-last">SomeoneL1</span>
          <span class="span3 b-guest-i name-first">SomeoneF1</span>
          <span class="span3 b-guest-i passport">XX2255551</span>
          <span class="span1 b-guest-i age">43</span>
          <span class="span2 b-guest-i gender">Male</span>
        </div>
        <div class="row-fluid booking-guest add-guest-as-passenger" id="booking-guest-12" data-guestid="12" data-passengerid="0" data-firstname="SomeoneF2" data-lastname="SomeoneL2" data-passportid="XX0011221" data-age="41" data-gender="Unspecified">
          <span class="span3 b-guest-i name-last">SomeoneL2</span>
          <span class="span3 b-guest-i name-first">SomeoneF2</span>
          <span class="span3 b-guest-i passport">XX0011221</span>
          <span class="span1 b-guest-i age">41</span>
          <span class="span2 b-guest-i gender">Unspecified</span>
        </div>
      </div>
    </div>
  </div>
</div>

Answer 1

您快到了，只需进行一项更改即可。

将val输入元素中的属性名称从value 更改为 passengerTemplate。

(function($) {
  $(document).ready(function() {

    let passengersRows = $('.booking-passenger-entry');
    let passengersRowsI = passengersRows.length;

    $('.add-guest-as-passenger').on('click', function() {
      let passengerData = {};
      console.clear();
      console.log(this);
      passengerData.guestid = $(this).attr('data-guestid');
      passengerData.passengerid = 0;
      passengerData.lastname = $(this).attr('data-lastname');
      passengerData.firstname = $(this).attr('data-firstname');
      passengerData.passportid = $(this).attr('data-passportid');
      passengerData.age = $(this).attr('data-age');
      passengerData.gender = $(this).attr('data-gender');

      addPassenger(passengerData);
    });

    function addPassenger(passenger) {
      passengersRowsI++;
      let i = passengersRowsI;
      let container = $('#passengers-container');
      let genderSelectOptionA = `<option value="0">Unspecified</option>`;
      let genderSelectOptionB = `<option value="1">Male</option>`;
      let genderSelectOptionC = `<option value="2">Female</option>`;
      if (passenger.gender == 'Male') {
        genderSelectOptionB = `<option value="1" selected>Male</option>`;
      } else if (passenger.gender == 'Female') {
        genderSelectOptionC = `<option value="2" selected>Female</option>`;
      }
      console.clear();

      let passengerTemplate = `
			<div class="row-fluid booking-passenger-entry inputform" id="passengers-container-${i}" data-guestid="${passenger.guestid}" data-passengerid="">
				<input type="text" required id="input-name-last-${i}" name="passengers[${i}][name-last]" class="span3 b-guest-i input name-last" placeholder="Last name" value="John" >
				<input type="text" required id="input-name-first-${i}" name="passengers[${i}][name-first]" class="span3 b-guest-i input name-first" placeholder="First name" value="${passenger.firstname}" >
				<input type="text" required id="input-passport-${i}" name="passengers[${i}][passport]" class="span2 b-guest-i input passport" placeholder="Passport ID" value="${passenger.passportid}" >
				<input type="text" required id="input-age-${i}" name="passengers[${i}][age]" class="span1 b-guest-i input age" placeholder="Age" value="${passenger.age}" >
				<select id="input-gender-${i}" required name="passengers[${i}][gender]" class="span2 b-guest-i input gender">
					${genderSelectOptionA}
					${genderSelectOptionB}
					${genderSelectOptionC}
				</select>
				<div class="btn-group span1 pull-right">
					<div id="passenger-delete" class="btn btn-danger"><i class="fa fa-minus-circle" aria-hidden="true"></i></div>
				</div>
				<input type="hidden" id="input-passengerid-${i}" name="passengers[${i}][passengerid]" class="hidden b-guest-i input" value="" >
				<input type="hidden" id="input-guestid-${i}" name="passengers[${i}][guestid]" class="hidden b-guest-i input" value="${passenger.guestid}" >

			</div>`;
      $(container).append(passengerTemplate);

    }

  });
})(jQuery);

.booking-passenger-entry {
    padding: 0.3125rem 0;
}
.booking-guest {
  margin: 1px 0;
  padding: 0.3125rem !important;
  line-height: 1rem;
  cursor: pointer;
  border-right: 1px solid #ddd;
  border-bottom: 1px solid #ddd;
  border-left: 1px solid #ddd;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<div id="booking-passengers" class="row-fluid req-passengers" style="">
  <div class="controls">
    <div class="passengerlist">
      <h3>Dynamic guestlist:</h3>
      <div class="row-fluid booking-guest booking-guest-headings">
        <span class="span3 b-guest-i b-guest-h name-last">Last name</span>
        <span class="span3 b-guest-i b-guest-h name-first">First name</span>
        <span class="span2 b-guest-i b-guest-h passport">Passport ID</span>
        <span class="span1 b-guest-i b-guest-h age">Age</span>
        <span class="span2 b-guest-i b-guest-h gender">Gender</span>
      </div>

      <div id="passengers-container" class="passengers-container" style="border:1px solid #aaa; min-height: 30px; background: #fafafa;">
      </div>

      <div class="guestlist">
        <h3>You may add passengers from your booking's guestlist</h3>
        <div class="row-fluid booking-guest booking-guest-headings">
          <span class="span3 b-guest-i b-guest-h name-last">Last name</span>
          <span class="span3 b-guest-i b-guest-h name-first">First name</span>
          <span class="span3 b-guest-i b-guest-h passport">Passport ID</span>
          <span class="span1 b-guest-i b-guest-h age">Age</span>
          <span class="span2 b-guest-i b-guest-h gender">Gender</span>
        </div>
        <div class="row-fluid booking-guest add-guest-as-passenger" id="booking-guest-8" data-guestid="8" data-passengerid="0" data-firstname="SomeoneF1" data-lastname="SomeoneL1" data-passportid="XX2255551" data-age="43" data-gender="Male">
          <span class="span3 b-guest-i name-last">SomeoneL1</span>
          <span class="span3 b-guest-i name-first">SomeoneF1</span>
          <span class="span3 b-guest-i passport">XX2255551</span>
          <span class="span1 b-guest-i age">43</span>
          <span class="span2 b-guest-i gender">Male</span>
        </div>
        <div class="row-fluid booking-guest add-guest-as-passenger" id="booking-guest-12" data-guestid="12" data-passengerid="0" data-firstname="SomeoneF2" data-lastname="SomeoneL2" data-passportid="XX0011221" data-age="41" data-gender="Unspecified">
          <span class="span3 b-guest-i name-last">SomeoneL2</span>
          <span class="span3 b-guest-i name-first">SomeoneF2</span>
          <span class="span3 b-guest-i passport">XX0011221</span>
          <span class="span1 b-guest-i age">41</span>
          <span class="span2 b-guest-i gender">Unspecified</span>
        </div>
      </div>
    </div>
  </div>
</div>

更新：由于您的代码中的id相同且无效，因此请考虑通过分配索引来更改id，例如

   id="input-name-last-${i}"

   id="input-name-first-${i}"

Answer 2

在此示例中，我发现，将所需标记放入一个输入组中，将其隐藏起来，然后为每个实例克隆该标记，会更容易。我将在实际使用数据的方式上留给您，我也删除了所有ID，因此不会插入重复的ID。如果需要ID，可以调整克隆标记以包含它们。

这样做的好处是您不必在代码中维护HTML。

(function($) {
    let passengersRows = $('.booking-passenger-entry');
    let passengersRowsI = passengersRows.length;

    $('.add-guest-as-passenger').on('click', function() {
      let passengerData = {};
      passengerData.guestid = $(this).data('guestid');
      passengerData.passengerid = 0;
      passengerData.lastname = $(this).data('lastname');
      passengerData.firstname = $(this).data('firstname');
      passengerData.passportid = $(this).data('passportid');
      passengerData.age = $(this).data('age');
      passengerData.gender = $(this).data('gender');
      addPassenger(passengerData);
    });

    function addPassenger(passenger) {
      let container = $('#passengers-container');
      let inputGroups = container.find('.booking-passenger-entry');
      let clone = container.find('.hidden-input-group').first().clone(true);
      let i = inputGroups.length;
      // might want this>
      // passenger.passengerid = i;
      let gender = clone.find('.input.gender');
      if (passenger.gender == 'Male') {
        gender.val(1);
      } else if (passenger.gender == 'Female') {
        gender.val(2);;
      }

      clone.find('.name-first').val(passenger.firstname);
      clone.find('.name-last').val(passenger.lastname);
      clone.data('guestid', passenger.guestid);
      clone.data('passengerid', passenger.passengerid);
      clone.find('.input.passport').val(passenger.passportid);
      clone.find('.input.age').val(passenger.age);
      clone.removeClass("hidden-input-group");
      container.append(clone);
    }
})(jQuery);

.booking-passenger-entry {
  padding: 0.3125rem 0;
}

.booking-guest {
  margin: 1px 0;
  padding: 0.3125rem !important;
  line-height: 1rem;
  cursor: pointer;
  border-right: 1px solid #ddd;
  border-bottom: 1px solid #ddd;
  border-left: 1px solid #ddd;
}

.hidden-input-group {
  display: none;
}

#passengers-container {
  border: 1px solid #aaa;
  min-height: 50px;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="booking-passengers" class="row-fluid req-passengers" style="">
  <div class="controls">
    <div class="passengerlist">
      <h3>Dynamic guestlist:</h3>
      <div class="row-fluid booking-guest booking-guest-headings">
        <span class="span3 b-guest-i b-guest-h name-last">Last name</span>
        <span class="span3 b-guest-i b-guest-h name-first">First name</span>
        <span class="span2 b-guest-i b-guest-h passport">Passport ID</span>
        <span class="span1 b-guest-i b-guest-h age">Age</span>
        <span class="span2 b-guest-i b-guest-h gender">Gender</span>
      </div>
      <div id="passengers-container" class="passengers-container">
        <div class="row-fluid booking-passenger-entry inputform hidden-input-group" data-guestid="" data-passengerid="">
          <input type="text" required data-name="" class="span3 b-guest-i input name-last " placeholder="Last name" />
          <input type="text" required class="span3 b-guest-i input name-first" placeholder="First name" />
          <input type="text" required class="span2 b-guest-i input passport" placeholder="Passport ID" />
          <input type="text" required class="span1 b-guest-i input age" placeholder="Age" />
          <select required class="span2 b-guest-i input gender">
            <option value="0">Unspecified</option>
            <option value="1">Male</option>
            <option value="2">Female</option>
          </select>
          <div class="btn-group span1 pull-right">
            <div class="passenger-delete btn btn-danger"><i class="fa fa-minus-circle" aria-hidden="true"></i></div>
          </div>
          <input type="hidden" class="hidden b-guest-i input" />
          <input type="hidden" class="hidden b-guest-i input" />
        </div>
      </div>
      <div class="guestlist">
        <h3>You may add passengers from your booking's guestlist</h3>
        <div class="row-fluid booking-guest booking-guest-headings">
          <span class="span3 b-guest-i b-guest-h name-last">Last name</span>
          <span class="span3 b-guest-i b-guest-h name-first">First name</span>
          <span class="span3 b-guest-i b-guest-h passport">Passport ID</span>
          <span class="span1 b-guest-i b-guest-h age">Age</span>
          <span class="span2 b-guest-i b-guest-h gender">Gender</span>
        </div>
        <div class="row-fluid booking-guest add-guest-as-passenger" id="booking-guest-8" data-guestid="8" data-passengerid="0" data-firstname="SomeoneF1" data-lastname="SomeoneL1" data-passportid="XX2255551" data-age="43" data-gender="Male">
          <span class="span3 b-guest-i name-last">SomeoneL1</span>
          <span class="span3 b-guest-i name-first">SomeoneF1</span>
          <span class="span3 b-guest-i passport">XX2255551</span>
          <span class="span1 b-guest-i age">43</span>
          <span class="span2 b-guest-i gender">Male</span>
        </div>
        <div class="row-fluid booking-guest add-guest-as-passenger" id="booking-guest-12" data-guestid="12" data-passengerid="0" data-firstname="SomeoneF2" data-lastname="SomeoneL2" data-passportid="XX0011221" data-age="41" data-gender="Unspecified">
          <span class="span3 b-guest-i name-last">SomeoneL2</span>
          <span class="span3 b-guest-i name-first">SomeoneF2</span>
          <span class="span3 b-guest-i passport">XX0011221</span>
          <span class="span1 b-guest-i age">41</span>
          <span class="span2 b-guest-i gender">Unspecified</span>
        </div>
      </div>
    </div>
  </div>
</div>