運行功能後.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>