jqueryがappend to appendに追加されない

Question

私の問題はappend要素の後に追加されます。 最初にいくつかのスパン（2 divで）とその作業を追加しますが、別のdivを追加した後、私の古いappendを新しいappend divに追加しません！ （あなたが私の言うことを理解してくれることを願ってください：Pと私の悪いengのために申し訳ありません） 私のコードをチェックしてください。

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>

Answer 1

小さな作業ソリューション：

説明が必要ですか？

私はあなたのコードにいくつかの変更を加えなければならないので、読みやすく/分かりやすくなっています。あなたが私にそれらを指摘したいかどうか教えてください。簡単に言うと

：

• ボタンは、（一つだけが必要とされている）
• .hotelクラス（simplierとより意味論を使用しdiv#hotelsホテルとして（S）コンテナ
• を使用してホテルのdivの外にありますhotel-add）
• Sにラベルを追加class
• としてそれを使用するために、マルチ使用「productRowWrappers」idを削除どのようにホテルのインデックス
• は（あなたがあまりにも多くをやっている（問題がここにもあった）新しい入力フィールド（ないクラス） のリターンを入力フィールド を削除し、追加する
• 使用simplier方法を簡単な関数を使用します/に、不要な仕事）

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>

Answer 2

ヘルプあなた、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つに常に少なくとも2つの問題があります。）。

Answer 3

まず、addhotel関数は次のコードのようになります。

単にI：

• クローン元の形の
は（あなたのコードでそれを持っていたしなければならない） #hotelsコンテナに追加
• UNIQようにそのIDを変更
• 使用。

機能コード：

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にモデル・フォームを隠してクローンします。

今すぐ始めましょう。