Question

我必须在点击事件上逐个添加2 div，此后添加按钮将被禁用，当我删除第一个或第二个添加的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;
});
});

问题是，每当我点击删除按钮时，循环都会被吸入，添加按钮将不可见请给我一些建议..

Answer 1

我强烈建议您尽可能嵌套.click();事件处理程序。他们倾向于欺骗AJAX请求，并在嵌套时做各种古怪的事情。

在这种情况下的示例：

$("#addMoreroom").on("click", function () {
    $('#roomDiv-1').addClass('show');
    $('#addMoreroom').attr('id', 'addMoreroom1');
});

$("#rmoveRoom_1").on("click", function () {
    $('#roomDiv-1').remove();
    $('#addMoreroom1').show();
});

$("#addMoreroom1").on("click", function () {
    $('#roomDiv-2').addClass('show');
    $(this).hide();
});

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

我也认为return false;不是必需的，我主要使用它来终止条件上的函数。为什么要使用.on();？ .live();已被弃用，您正在改变DOM。

Fiddle对我不起作用，但我认为您可能会收到不存在ID的错误。

最终修改，添加了添加按钮的可见性，小提琴http://jsfiddle.net/9aBAe/2/：

$(document).on("click","#addMoreroom", function () {
    if($('#roomDiv-1').css("display") == "none")
    {            
        $('#roomDiv-1').show();
    }
    else if($('#roomDiv-2').css("display") == "none")
    {
        $('#roomDiv-2').show();
    }
});

$(document).on("click","#rmoveRoom_1", function () {
    $('#roomDiv-1').hide();
});

$(document).on("click","#rmoveRoom_2", function () {
    $('#roomDiv-2').hide();
});

$(document).on("click","a", function () {
    if($('#roomDiv-1').css("display") == "none" && $('#roomDiv-2').css("display") == "none")
    {
        $("#addMoreroom").show();        
    }
    else if ($('#roomDiv-1').css("display") == "none" || $('#roomDiv-2').css("display") == "none")
    {
       $("#addMoreroom").show(); 
    }
    else
    {
        $("#addMoreroom").hide();     
    }

});

Answer 2

我猜这是你问的问题。这link。这是代码。

var addRoomCounter = 2;
$("#addMoreroom").click(function () {
    if(addRoomCounter == 2)
    {    
        $('#roomDiv-1').show();
    }
    if(addRoomCounter == 1)
    {    
        $('#roomDiv-2').show();
        $(this).hide();
    }
    addRoomCounter=addRoomCounter-1;
});

$("#rmoveRoom_1").click(function () {
    $('#roomDiv-1').hide();
    if(addRoomCounter == 0)
    {
        $('#addMoreroom').show();
    }
    addRoomCounter=addRoomCounter+1;
});

$("#rmoveRoom_2").click(function () {
    $('#roomDiv-2').hide()
    if(addRoomCounter == 0)
    {
        $('#addMoreroom').show();
    } 
    addRoomCounter=addRoomCounter+1;
});

你只做了一件事。您对元素使用remove函数。它从html文档中删除元素。所以你不能再打电话了。在我的情况下，我只需用removeClass（'show'）替换remove函数并调用addClass（'hide'）

Answer 3

使用jquery的show()和hide()以及toggle()函数，你不必定义自己的css，因为这些函数会处理它..

http://api.jquery.com/show/

Answer 4

这是您的工作代码：

HTML：

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

的Jquery：

$(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/

使用click事件添加和删除div

4 个答案: