我的问题是在追加元素后我的选择选项附加更多不起作用。 首先我添加一些跨度（在2 div）和它的工作，但在我添加另一个div与附加我的旧附加没有添加在新的附加div！ （希望你们明白我的意思：P和抱歉我的坏人） 请检查我的代码。
if ($('.returnRequests').length) {
var count = 1;
function emptyRow() {
this.obj = $('<span class="returnRequests"></span>');
this.obj.append('<input placeholder="input '+ (count++) +'" class="form-control-sm form-text col-md-3 p-0 pr-2 mr-2 d-inline-block" id="edit-submitted-codepostal" name="submitted[CodePostal]" value="" size="60" maxlength="5" autocomplete="off" type="text">\n');
}
function refresh(count) {
var wrapper = $('#productRowWrappers');
while (wrapper.children().length > count)
wrapper.children().last().remove();
while (wrapper.children().length < count)
wrapper.append((new emptyRow()).obj);
}
$('#quantityReturn').change(function () {
refresh(parseInt($(this).val()));
});
}
function addhotel() {
$('.add-hotel').append(`
<div class="hotels-dashboard hotel-add-1 container mb-3">
<p class="mt-2">
<span class="title-main"><i class="fa fa-hotel"></i> Hotels </span>
<span onclick="addhotel()" id="add-hotel" class="float-left bg-add-hotel p-1"><i class="fa fa-plus"></i> AddMore </span>
</p>
<hr>
<div class="row container ">
<div class="returnRequests col-md-12 p-0" id="productRowWrappers"></div>
</div>
<!-- EXTRA DIV HERE, BREAKS YOUR HTML CODE -->
`
)
}<script src="https://code.jquery.com/jquery-1.10.2.js"></script>
<select class="custom-select col-md-4 mt-2 mb-2 mb-sm-0" id="quantityReturn" >
<option value="0" selected> select number </option>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
</select>
<div class="add-hotel">
<div class="hotels-dashboard hotel-add-1 container mb-3">
<p class="mt-2">
<span class="title-main"><i class="fa fa-hotel"></i> Hotels </span>
<span onclick="addhotel()" id="add-hotel" class="float-left bg-add-hotel p-1"><i class="fa fa-plus"></i> AddMore </span>
</p>
<hr>
<div class="row container ">
<div class="returnRequests col-md-12 p-0" id="productRowWrappers">
</div>
</div>
</div>
</div>
答案 0 :(得分：0)
帮助你，@ ShayanSakha ......
如果您尝试编写干净的代码，可以帮助您找到很多错误。并且您帮助我们帮助您。
例如，查看额外的</div>，这会破坏您的HTML代码，可能是您遇到问题的原因。使用你的（丑陋的，抱歉的）代码，你无法看到它（我们都没有）。
（注意：我删除了您的所有\n。它们在HTML语言中没有任何意义。请勿使用它们。
function addhotel() {
$('.add-hotel').append(`
<div class="hotels-dashboard hotel-add-1 container mb-3">
<p class="mt-2">
<span class="title-main"><i class="fa fa-hotel"></i> Hotels </span>
<span onclick="addhotel()" id="add-hotel" class="float-left bg-add-hotel p-1"><i class="fa fa-plus"></i> add </span>
<span id="removehotels"></span>
</p>
<hr>
<div class="row container ">
<div class="returnRequests col-md-12 p-0" id="productRowWrappers"></div>
<select class="custom-select col-md-4 mb-2 mt-3 mr-sm-2 mb-sm-0" id="inlineFormCustomSelect">
<option selected="">test</option>
<option value="1">One</option>
<option value="2">Two</option>
<option value="3">Three</option>
</select>
</div>
<div class="row price-input">
<!--
HERE FOUR TIMES THE SAME ID
ID MUST BE UNIQ IN THE BODY
-->
<input placeholder="test place" class="form-control-sm form-text col-md-3" id="edit-submitted-codepostal" name="submitted[CodePostal]" value="" size="20" autocomplete="off" type="text">
<input placeholder="test place" class="form-control-sm form-text col-md-3" id="edit-submitted-codepostal" name="submitted[CodePostal]" value="" size="20" autocomplete="off" type="text">
<input placeholder="test place" class="form-control-sm form-text col-md-3" id="edit-submitted-codepostal" name="submitted[CodePostal]" value="" size="20" autocomplete="off" type="text">
<input placeholder="test place" class="form-control-sm form-text col-md-3" id="edit-submitted-codepostal" name="submitted[CodePostal]" value="" size="20" autocomplete="off" type="text">
</div>
<div class="md-form text-area-dashboard col-md-8 mt-4">
<textarea type="text" id="need-madarek" class="md-textarea"></textarea>
<label for="need-madarek" class="comment-label pr-2">label</label>
</div>
</div>
</div><!-- EXTRA DIV HERE, BREAKS YOUR HTML CODE -->
`
)
}
但你永远不应该写这么多代码......
告诉我它是否更好，也许这只是第一步（记住：在一个问题中总是至少有两个问题）。
答案 1 :(得分：0)
首先，您的addhotel功能应如下所示。
我只是：
#hotels容器中（您必须在代码中使用它）。功能代码：
function addhotel()
{
// Get all the hotels
let allHotels = $('.hotel') ;
// Clone the first one
let newHotel = allHotels.first().clone() ;
// Set an uniq ID from hotels count
newHotel.attr('id', "hotel-" + (allHotels.length + 1))
// Append it to the container
$('#hotels').append( newHotel );
}
您的HTML代码如下：
<div id="hotels"><!-- add this to your code -->
<div class="hotel" id="hotel-1"><!-- a convenient ID -->
<!-- ... -->
</div>
添加后，它看起来像：
<div id="hotels">
<div class="hotel" id="hotel-1">
<!-- ... -->
</div>
<div class="hotel" id="hotel-2"><!-- Notice the uniq ID -->
<!-- same content -->
</div>
</div><!-- /#hotels container -->
当然，也许您必须重置表单。或者在HTML中隐藏模型表单以克隆它。
现在我们可以开始继续了。
答案 2 :(得分：0)
一个微小的工作解决方案：
你需要一些解释吗？
我必须对您的代码进行一些更改，以使其更易读/可理解。告诉我你是否要我指出它们。
简而言之：
div#hotels作为酒店容器.hotel类（比hotel-add更简单和语义）id，将其用作class
function addhotel()
{
let allHotels = $('#hotels .hotel')
, newHotel = allHotels.first().clone()
, hotelID = allHotels.length + 1 ;
// Set the ID attribute to be uniq
newHotel.attr('id', "hotel-add-" + hotelID) ;
// "hotel-<ID>" as ID would be better, though
// We write the hotel index
newHotel.find('.hotel-number').text(hotelID);
$('#hotels').append( newHotel );
}
if ($('.returnRequests').length) {
// Return an empty row
function emptyRow(hotelNum) {
return '<input placeholder="hotel '+ hotelNum +'" class="form-control-sm form-text col-md-3 p-0 pr-2 mr-2 d-inline-block" id="edit-submitted-codepostal" name="submitted[CodePostal]" value="" size="60" maxlength="5" autocomplete="off" type="text">'
}
/**
* "Refresh" each hotel with the required
* count of input fields. Add or remove them as necessary.
*
*/
function refresh(count) {
// Loop on each hotel
$('#hotels .hotel').each(function(hotelIndex, o){
// How manu fields in place ?
let fieldsCount = $(o).find('.form-control-sm').length;
// Just in case…
if ( fieldsCount == count ) { return ; }
let wrapper = $(o).find('.productRowWrappers');
// Too much fields or not enough?
if (fieldsCount > count)
{
// To much => remove surplus
wrapper.find('.form-control-sm:nth-child(n+'+(count+1)+')').remove();
}
else
{
// Not enough => create the missing
let i, len, hotelNum = hotelIndex + 1 ;
for(i = 0, len = count-fieldsCount ; i < len ; ++ i)
{
wrapper.append(emptyRow(hotelNum));
}
}
})
}
$('#quantityReturn').change(function () {
refresh(parseInt($(this).val()));
});
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select class="custom-select col-md-4 mt-2 mb-2 mb-sm-0" id="quantityReturn">
<option value="0" selected> select number </option>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
</select>
<p class="mt-2">
<span class="title-main"><i class="fa fa-hotel"></i> Hotels </span>
<button onclick="addhotel()" id="add-hotel-button" class="float-left bg-add-hotel p-1"><i class="fa fa-plus"></i>Add More</button>
</p>
<!-- ID is better here -->
<div id="hotels">
<div id="hotel-add-1" class="hotel hotels-dashboard container mb-3">
<hr>
<div>Hotel #<span class="hotel-number">1</span></div>
<div class="returnRequests col-md-12 p-0 productRowWrappers">
</div>
</div>
</div>