juleryで使用すると、私のulの要素が消える

Question

Foundationからドロップダウンパネルにリストを作成しました。リストにはリンクがあります。これは私のリストです：

<button class="button plzddmenu" type="button" data-toggle="PLZdropdown">Postleitszahl Suche</button> 
    <div class="dropdown-pane" id="PLZdropdown" data-dropdown data-auto-focus="true"> 
     <ul class="plzlist"> 
     <li><a class="plzclick">10000 - 19999</a></li> 
     <li><a class="plzclick">20000 - 39999</a></li> 
     <li><a class="plzclick">40000 - 59999</a></li> 
     <li><a class="plzclick">60000 - 79999</a></li> 
     <li><a class="plzclick">80000 - 99999</a></li> 
     </ul> 
    </div> 

今、私は要素がクリックされた場合は、検出するためのjQueryのスクリプトを使用していて、それらがクリックされているときに、ボタンにそれらを書くこと

。それはすべて私がそれらをクリックした後、私Elementsは、私のリストから消えていることに加えて、正常に動作します

<script type="text/javascript"> 
    $(document).ready(function(){ 

    $('.plzclick').on("click", function(){ 
     $('.plzddmenu').html(this); 
    }); 

</script> 

：これは私のスクリプトです。誰も知っている、なぜ彼らが消えて、私はそれらを維持するためにこれを修正することができますか？

Answer 1

あなたはアイテムをボタンに移動しています。ボタンのHTMLをクリックしたタグのHTMLコンテンツに変更するだけで済みます。

$（this）.html（）; // elemtentのhtmlコンテンツを再実行します。

$(document).ready(function() { 
 

 
    $('.plzclick').on("click", function() { 
 
     $('.plzddmenu').html($(this).html()); 
 
     console.log(this); 
 
     console.log($(this)); 
 
     console.log($(this).html()); 
 
    }); 
 

 
    });

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script> 
 
<button class="button plzddmenu" type="button" data-toggle="PLZdropdown">Postleitszahl Suche</button> 
 
<div class="dropdown-pane" id="PLZdropdown" data-dropdown data-auto-focus="true"> 
 
    <ul class="plzlist"> 
 
    <li><a class="plzclick">10000 - 19999</a> 
 
    </li> 
 
    <li><a class="plzclick">20000 - 39999</a> 
 
    </li> 
 
    <li><a class="plzclick">40000 - 59999</a> 
 
    </li> 
 
    <li><a class="plzclick">60000 - 79999</a> 
 
    </li> 
 
    <li><a class="plzclick">80000 - 99999</a> 
 
    </li> 
 
    </ul> 
 
</div> 
 

 
<script type="text/javascript"> 
 
</script>