运行功能后.append

Question

我有以下的html代码：

<div> 
    <div id="a"></div> 
</div> 

当ID在div =“一个”被点击，我要替换该div有以下DIV：

<div id="b"></div> 

我设法创建了下面的提琴：http://jsfiddle.net/ucant5uy/ 在这个小提琴中，您可以看到第一个函数（#a被点击）运行完美，但第二个函数（#b被点击）不运行，因为加载页面时div #b不存在。

然后我决定把第二个函数放在第一个函数里面：http://jsfiddle.net/ucant5uy/2/。如您所见，您可以单击#a一次，然后单击#b，然后代码停止工作。我希望能够按照我的意愿多次点击#a和#b。我知道你可以通过一些简单的CSS技巧来实现这一点（将div添加到HTML并使用display：none;），但我想知道使用.append（）可以实现同样的功能。

在此先感谢！

Answer 1

您应该将函数绑定到父div（并且它的格式为main），它存在于DOM中并且将存在，否则您只能将该函数分配给DOM中已存在的元素。

$(document).ready(function() { 
 
     $('#main').on("click","#a",function() { 
 
      $(this).parent().append('<div id="b"></div>'); 
 
      $(this).remove(); 
 
     }) 
 
     
 
     $('#main').on("click","#b",function() { 
 
      $(this).parent().append('<div id="a"></div>'); 
 
      $(this).remove(); 
 
     }) 
 
    });

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div id="main"> 
 
    <div id="a"></div> 
 
</div>

Answer 2

使用。对（）为未来的元素事件处理程序

$("div").on('click','div#b',function() { 

     $(this).parent().append('<div id="a"></div>'); 
     $(this).remove(); 
    }) 

演示：

$(document).ready(function() { 
 
    $("div").on('click','div#a',function() { 
 
     $(this).parent().append('<div id="b"></div>'); 
 
     $(this).remove(); 
 
    }) 
 
    
 
    $("div").on('click','div#b',function() { 
 
     
 
     $(this).parent().append('<div id="a"></div>'); 
 
     $(this).remove(); 
 
    }) 
 
});

div { 
 
    width:200px; 
 
    height:200px; 
 
    background:red; 
 
} 
 

 
#a, #b { 
 
    width:100px; 
 
    height:100px; 
 
} 
 

 
#a { 
 
    background-color:green; 
 
} 
 

 
#b { 
 
    background-color:blue; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div> 
 
    <div id="a"></div> 
 
</div>