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

Question

我已经解决了这个问题，我希望得到任何帮助 - 这可能是显而易见的事情，但目前我看不出问题所在。

一些背景：

我正在以描述一个人的形式动态添加一组字段。对于全新条目，这些字段可以为空，或者用户可以从现有人员（描述为访客）列表中进行选择，我将其呈现在 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 = `

  });

Answer 1

您已经快完成了，只需要做一项更改即可。将输入元素中的属性名称从 更改val 为 。valuepassengerTemplate(function($) {&nbsp; $(document).ready(function() {&nbsp; &nbsp; let passengersRows = $('.booking-passenger-entry');&nbsp; &nbsp; let passengersRowsI = passengersRows.length;&nbsp; &nbsp; $('.add-guest-as-passenger').on('click', function() {&nbsp; &nbsp; &nbsp; let passengerData = {};&nbsp; &nbsp; &nbsp; console.clear();&nbsp; &nbsp; &nbsp; console.log(this);&nbsp; &nbsp; &nbsp; passengerData.guestid = $(this).attr('data-guestid');&nbsp; &nbsp; &nbsp; passengerData.passengerid = 0;&nbsp; &nbsp; &nbsp; passengerData.lastname = $(this).attr('data-lastname');&nbsp; &nbsp; &nbsp; passengerData.firstname = $(this).attr('data-firstname');&nbsp; &nbsp; &nbsp; passengerData.passportid = $(this).attr('data-passportid');&nbsp; &nbsp; &nbsp; passengerData.age = $(this).attr('data-age');&nbsp; &nbsp; &nbsp; passengerData.gender = $(this).attr('data-gender');&nbsp; &nbsp; &nbsp; addPassenger(passengerData);&nbsp; &nbsp; });&nbsp; &nbsp; function addPassenger(passenger) {&nbsp; &nbsp; &nbsp; passengersRowsI++;&nbsp; &nbsp; &nbsp; let i = passengersRowsI;&nbsp; &nbsp; &nbsp; let container = $('#passengers-container');&nbsp; &nbsp; &nbsp; let genderSelectOptionA = `<option value="0">Unspecified</option>`;&nbsp; &nbsp; &nbsp; let genderSelectOptionB = `<option value="1">Male</option>`;&nbsp; &nbsp; &nbsp; let genderSelectOptionC = `<option value="2">Female</option>`;&nbsp; &nbsp; &nbsp; if (passenger.gender == 'Male') {&nbsp; &nbsp; &nbsp; &nbsp; genderSelectOptionB = `<option value="1" selected>Male</option>`;&nbsp; &nbsp; &nbsp; } else if (passenger.gender == 'Female') {&nbsp; &nbsp; &nbsp; &nbsp; genderSelectOptionC = `<option value="2" selected>Female</option>`;&nbsp; &nbsp; &nbsp; }&nbsp; &nbsp; &nbsp; console.clear();&nbsp; &nbsp; &nbsp; let passengerTemplate = `&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <div class="row-fluid booking-passenger-entry inputform" id="passengers-container-${i}" data-guestid="${passenger.guestid}" data-passengerid="">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <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" >&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <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}" >&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <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}" >&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <input type="text" required id="input-age-${i}" name="passengers[${i}][age]" class="span1 b-guest-i input age" placeholder="Age" value="${passenger.age}" >&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <select id="input-gender-${i}" required name="passengers[${i}][gender]" class="span2 b-guest-i input gender">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; ${genderSelectOptionA}&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; ${genderSelectOptionB}&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; ${genderSelectOptionC}&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; </select>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <div class="btn-group span1 pull-right">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <div id="passenger-delete" class="btn btn-danger"><i class="fa fa-minus-circle" aria-hidden="true"></i></div>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; </div>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <input type="hidden" id="input-passengerid-${i}" name="passengers[${i}][passengerid]" class="hidden b-guest-i input" value="" >&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <input type="hidden" id="input-guestid-${i}" name="passengers[${i}][guestid]" class="hidden b-guest-i input" value="${passenger.guestid}" >&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; </div>`;&nbsp; &nbsp; &nbsp; $(container).append(passengerTemplate);&nbsp; &nbsp; }&nbsp; });})(jQuery);.booking-passenger-entry {&nbsp; &nbsp; padding: 0.3125rem 0;}.booking-guest {&nbsp; margin: 1px 0;&nbsp; padding: 0.3125rem !important;&nbsp; line-height: 1rem;&nbsp; cursor: pointer;&nbsp; border-right: 1px solid #ddd;&nbsp; border-bottom: 1px solid #ddd;&nbsp; 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="">&nbsp; <div class="controls">&nbsp; &nbsp; <div class="passengerlist">&nbsp; &nbsp; &nbsp; <h3>Dynamic guestlist:</h3>&nbsp; &nbsp; &nbsp; <div class="row-fluid booking-guest booking-guest-headings">&nbsp; &nbsp; &nbsp; &nbsp; <span class="span3 b-guest-i b-guest-h name-last">Last name</span>&nbsp; &nbsp; &nbsp; &nbsp; <span class="span3 b-guest-i b-guest-h name-first">First name</span>&nbsp; &nbsp; &nbsp; &nbsp; <span class="span2 b-guest-i b-guest-h passport">Passport ID</span>&nbsp; &nbsp; &nbsp; &nbsp; <span class="span1 b-guest-i b-guest-h age">Age</span>&nbsp; &nbsp; &nbsp; &nbsp; <span class="span2 b-guest-i b-guest-h gender">Gender</span>&nbsp; &nbsp; &nbsp; </div>&nbsp; &nbsp; &nbsp; <div id="passengers-container" class="passengers-container" style="border:1px solid #aaa; min-height: 30px; background: #fafafa;">&nbsp; &nbsp; &nbsp; </div>&nbsp; &nbsp; &nbsp; <div class="guestlist">&nbsp; &nbsp; &nbsp; &nbsp; <h3>You may add passengers from your booking's guestlist</h3>&nbsp; &nbsp; &nbsp; &nbsp; <div class="row-fluid booking-guest booking-guest-headings">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <span class="span3 b-guest-i b-guest-h name-last">Last name</span>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <span class="span3 b-guest-i b-guest-h name-first">First name</span>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <span class="span3 b-guest-i b-guest-h passport">Passport ID</span>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <span class="span1 b-guest-i b-guest-h age">Age</span>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <span class="span2 b-guest-i b-guest-h gender">Gender</span>&nbsp; &nbsp; &nbsp; &nbsp; </div>&nbsp; &nbsp; &nbsp; &nbsp; <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">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <span class="span3 b-guest-i name-last">SomeoneL1</span>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <span class="span3 b-guest-i name-first">SomeoneF1</span>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <span class="span3 b-guest-i passport">XX2255551</span>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <span class="span1 b-guest-i age">43</span>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <span class="span2 b-guest-i gender">Male</span>&nbsp; &nbsp; &nbsp; &nbsp; </div>&nbsp; &nbsp; &nbsp; &nbsp; <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">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <span class="span3 b-guest-i name-last">SomeoneL2</span>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <span class="span3 b-guest-i name-first">SomeoneF2</span>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <span class="span3 b-guest-i passport">XX0011221</span>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <span class="span1 b-guest-i age">41</span>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <span class="span2 b-guest-i gender">Unspecified</span>&nbsp; &nbsp; &nbsp; &nbsp; </div>&nbsp; &nbsp; &nbsp; </div>&nbsp; &nbsp; </div>&nbsp; </div></div>更新：由于id代码中的 是相同的并且无效，请考虑id通过分配索引来更改 ，例如，&nbsp;&nbsp;&nbsp;id="input-name-last-${i}" &nbsp;&nbsp;&nbsp;id="input-name-first-${i}"

Answer 2

我发现在这个例子中，更容易简单地将您想要的标记放入输入组中，隐藏它，然后为每个实例克隆它。我将把如何实际使用数据留给您，我还删除了所有 id，因此不会插入重复的 id。如果您需要 ID，您可以调整克隆标记来获取它们。这样做的好处是您不必在代码中维护 HTML。(function($) {&nbsp; &nbsp; let passengersRows = $('.booking-passenger-entry');&nbsp; &nbsp; let passengersRowsI = passengersRows.length;&nbsp; &nbsp; $('.add-guest-as-passenger').on('click', function() {&nbsp; &nbsp; &nbsp; let passengerData = {};&nbsp; &nbsp; &nbsp; passengerData.guestid = $(this).data('guestid');&nbsp; &nbsp; &nbsp; passengerData.passengerid = 0;&nbsp; &nbsp; &nbsp; passengerData.lastname = $(this).data('lastname');&nbsp; &nbsp; &nbsp; passengerData.firstname = $(this).data('firstname');&nbsp; &nbsp; &nbsp; passengerData.passportid = $(this).data('passportid');&nbsp; &nbsp; &nbsp; passengerData.age = $(this).data('age');&nbsp; &nbsp; &nbsp; passengerData.gender = $(this).data('gender');&nbsp; &nbsp; &nbsp; addPassenger(passengerData);&nbsp; &nbsp; });&nbsp; &nbsp; function addPassenger(passenger) {&nbsp; &nbsp; &nbsp; let container = $('#passengers-container');&nbsp; &nbsp; &nbsp; let inputGroups = container.find('.booking-passenger-entry');&nbsp; &nbsp; &nbsp; let clone = container.find('.hidden-input-group').first().clone(true);&nbsp; &nbsp; &nbsp; let i = inputGroups.length;&nbsp; &nbsp; &nbsp; // might want this>&nbsp; &nbsp; &nbsp; // passenger.passengerid = i;&nbsp; &nbsp; &nbsp; let gender = clone.find('.input.gender');&nbsp; &nbsp; &nbsp; if (passenger.gender == 'Male') {&nbsp; &nbsp; &nbsp; &nbsp; gender.val(1);&nbsp; &nbsp; &nbsp; } else if (passenger.gender == 'Female') {&nbsp; &nbsp; &nbsp; &nbsp; gender.val(2);;&nbsp; &nbsp; &nbsp; }&nbsp; &nbsp; &nbsp; clone.find('.name-first').val(passenger.firstname);&nbsp; &nbsp; &nbsp; clone.find('.name-last').val(passenger.lastname);&nbsp; &nbsp; &nbsp; clone.data('guestid', passenger.guestid);&nbsp; &nbsp; &nbsp; clone.data('passengerid', passenger.passengerid);&nbsp; &nbsp; &nbsp; clone.find('.input.passport').val(passenger.passportid);&nbsp; &nbsp; &nbsp; clone.find('.input.age').val(passenger.age);&nbsp; &nbsp; &nbsp; clone.removeClass("hidden-input-group");&nbsp; &nbsp; &nbsp; container.append(clone);&nbsp; &nbsp; }})(jQuery);.booking-passenger-entry {&nbsp; padding: 0.3125rem 0;}.booking-guest {&nbsp; margin: 1px 0;&nbsp; padding: 0.3125rem !important;&nbsp; line-height: 1rem;&nbsp; cursor: pointer;&nbsp; border-right: 1px solid #ddd;&nbsp; border-bottom: 1px solid #ddd;&nbsp; border-left: 1px solid #ddd;}.hidden-input-group {&nbsp; display: none;}#passengers-container {&nbsp; border: 1px solid #aaa;&nbsp; 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="">&nbsp; <div class="controls">&nbsp; &nbsp; <div class="passengerlist">&nbsp; &nbsp; &nbsp; <h3>Dynamic guestlist:</h3>&nbsp; &nbsp; &nbsp; <div class="row-fluid booking-guest booking-guest-headings">&nbsp; &nbsp; &nbsp; &nbsp; <span class="span3 b-guest-i b-guest-h name-last">Last name</span>&nbsp; &nbsp; &nbsp; &nbsp; <span class="span3 b-guest-i b-guest-h name-first">First name</span>&nbsp; &nbsp; &nbsp; &nbsp; <span class="span2 b-guest-i b-guest-h passport">Passport ID</span>&nbsp; &nbsp; &nbsp; &nbsp; <span class="span1 b-guest-i b-guest-h age">Age</span>&nbsp; &nbsp; &nbsp; &nbsp; <span class="span2 b-guest-i b-guest-h gender">Gender</span>&nbsp; &nbsp; &nbsp; </div>&nbsp; &nbsp; &nbsp; <div id="passengers-container" class="passengers-container">&nbsp; &nbsp; &nbsp; &nbsp; <div class="row-fluid booking-passenger-entry inputform hidden-input-group" data-guestid="" data-passengerid="">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <input type="text" required data-name="" class="span3 b-guest-i input name-last " placeholder="Last name" />&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <input type="text" required class="span3 b-guest-i input name-first" placeholder="First name" />&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <input type="text" required class="span2 b-guest-i input passport" placeholder="Passport ID" />&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <input type="text" required class="span1 b-guest-i input age" placeholder="Age" />&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <select required class="span2 b-guest-i input gender">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <option value="0">Unspecified</option>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <option value="1">Male</option>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <option value="2">Female</option>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; </select>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <div class="btn-group span1 pull-right">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <div class="passenger-delete btn btn-danger"><i class="fa fa-minus-circle" aria-hidden="true"></i></div>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; </div>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <input type="hidden" class="hidden b-guest-i input" />&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <input type="hidden" class="hidden b-guest-i input" />&nbsp; &nbsp; &nbsp; &nbsp; </div>&nbsp; &nbsp; &nbsp; </div>&nbsp; &nbsp; &nbsp; <div class="guestlist">&nbsp; &nbsp; &nbsp; &nbsp; <h3>You may add passengers from your booking's guestlist</h3>&nbsp; &nbsp; &nbsp; &nbsp; <div class="row-fluid booking-guest booking-guest-headings">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <span class="span3 b-guest-i b-guest-h name-last">Last name</span>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <span class="span3 b-guest-i b-guest-h name-first">First name</span>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <span class="span3 b-guest-i b-guest-h passport">Passport ID</span>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <span class="span1 b-guest-i b-guest-h age">Age</span>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <span class="span2 b-guest-i b-guest-h gender">Gender</span>&nbsp; &nbsp; &nbsp; &nbsp; </div>&nbsp; &nbsp; &nbsp; &nbsp; <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">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <span class="span3 b-guest-i name-last">SomeoneL1</span>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <span class="span3 b-guest-i name-first">SomeoneF1</span>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <span class="span3 b-guest-i passport">XX2255551</span>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <span class="span1 b-guest-i age">43</span>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <span class="span2 b-guest-i gender">Male</span>&nbsp; &nbsp; &nbsp; &nbsp; </div>&nbsp; &nbsp; &nbsp; &nbsp; <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">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <span class="span3 b-guest-i name-last">SomeoneL2</span>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <span class="span3 b-guest-i name-first">SomeoneF2</span>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <span class="span3 b-guest-i passport">XX0011221</span>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <span class="span1 b-guest-i age">41</span>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <span class="span2 b-guest-i gender">Unspecified</span>&nbsp; &nbsp; &nbsp; &nbsp; </div>&nbsp; &nbsp; &nbsp; </div>&nbsp; &nbsp; </div>&nbsp; </div></div>