Niklas Fett Niklas Fett - 4 months ago 6
jQuery Question

The Elements in my ul dissappear, when I use them with jQuery

I created a List in a Dropdown panel from Foundation. In that List I have links. This is my List:

<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>


Now I'm using a jQuery script to detect, if the elements were clicked, and when they're clicked, to write them into the Button. This is my script:

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

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

</script>


It all works fine, besides that my Elements disappear from my List, once I clicked them. Anyone know, why they dissapear and how I can fix this to make them stay?

Kld Kld
Answer

You are moving your items to the button, You need just to change your button html to the clicked a tag html content.

$(this).html();// retruns the html content of the elemtent.

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

Comments