0

この後、クリックイベントで2つのdivを1つずつ追加する必要があり、追加ボタンは無効になり、最初または2番目に追加されたdivを削除すると、追加ボタンが有効になりますここに私のコードがあります..ここにjsfiddleがあります

HTML

<a id="addMoreroom" class="fnt-size13" href="#">+ Add Rooms</a>
<div id="roomDiv-1" class="rowG clearfix hide">                                              
    <label>Selected Room Type</label>
        <select>
           <option>1</option>
        </select>
    <label>Number Of Rooms</label>
        <select>
           <option>3</option>
        </select>
    <a id="rmoveRoom_1" class="fnt-size13" href="#">- Remove</a>
</div>
<div id="roomDiv-2" class="rowG clearfix hide">                                            
    <label>Selected Room Type</label>
        <select>
           <option>1</option>
        </select>
    <label>Number Of Rooms</label>
        <select>
           <option>3</option>
        </select>
    <a id="rmoveRoom_2" class="fnt-size13" href="#">- Remove</a>
</div>

jQuery

$("#addMoreroom").click(function () {
    $('#roomDiv-1').addClass('show');
    $('#addMoreroom').attr('id', 'addMoreroom1');
    $("#addMoreroom1").click(function () {
        $('#roomDiv-2').addClass('show');
        $(this).hide();
        return false;
    });
});
$("#rmoveRoom_1").click(function () {
    $('#roomDiv-1').remove();
    $('#addMoreroom1').show();
    return false;
});

$("#rmoveRoom_2").click(function () {
    $('#roomDiv-2').remove();
    $('#addMoreroom').show();
    $('#addMoreroom1').attr('id', 'addMoreroom');
    return false;
});
});

問題は、削除ボタンをクリックするたびにループが吸い込まれ、追加ボタンが表示されないことです。何か提案をお願いします..

4

4 に答える 4

0

作業コードは次のとおりです。

HTML:

<a id="addMoreroom" class="fnt-size13" href="#">+ Add Rooms</a>
  <div id="parentroom">
  </div>

Jクエリ:

$(document).on("click","#addMoreroom",function() {
            var div1=$('#roomDiv-1').html();
              if($("#parentroom #roomDiv-1").length>1){                  
                $("#addMoreroom").attr('disabled',true);   
              }else{
                $("#parentroom").append("<div id='roomDiv-1' class='rowG clearfix hide'><label>Selected Room Type</label><select><option>1</option></select><label>Number Of Rooms</label><select><option>3</option></select><a id='rmoveRoom_1' class='fnt-size13' href='#'>- Remove</a></div>");
           }
      });                  
     $("#parentroom").on("click","#rmoveRoom_1",function() {
         if($(this).parent().index()==0 ||$(this).parent().index()==1){
            $("#addMoreroom").prop('disabled',false);
         }
         $(this).closest($("#parentroom #roomDiv-1")).remove();
            return false;

        });

デモ: http://jsfiddle.net/M7nM8/

于 2013-10-31T10:00:36.313 に答える