0

$(document).ready(function(){
  $("#itemlist").append("<li>TEST<input type='button' class='toggle_popup_menu' value='edit'></li>");
  getDataFromDb();
$("#itemlist").append("<li>TEST<input type='button' class='toggle_popup_menu' value='edit'></li>");
  addTogleListeners();
$("#itemlist").append("<li>TEST<input type='button' class='toggle_popup_menu' value='edit'></li>");
  });

function getDataFromDb(){
  //alert('haal gegevens op');
  var url="http://rubenkoops.nl/medialab/php/json.php";
  $.getJSON(url,function(result){
  console.log(result);
  //$("#itemlist").empty()
  
  $.each(result, function(i, field){
   var id=field.id;
    var name="<h1>"+field.name+" ("+id+")</h1>";
    var type=field.type;
    var state=field.state;
   
    $("#itemlist").append("<li>"+name+type+state+"<input type='button' class='toggle_popup_menu' value='edit'></li>");
    });
   });
  alert("items binnengehaald");
  
}

function addTogleListeners(){

 $(".toggle_popup_menu").click(function(){
  var checkBox = $("#popup_checkbox");
  checkBox.trigger('click');
  });
};
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="checkbox" id="popup_checkbox">
<div id="itemlist">
</div>

I have a strange problem, for some reason some appended element won't fire a click event, I have added a code snippet. The first two work, the rest does not...

apielotje
  • 41
  • 1
  • 7
  • Include it while defining your click handler. Syntax is available **[here](http://stackoverflow.com/a/9331127/3639582)** – Shaunak D Jun 19 '16 at 13:38
  • `$("#container").on("click",".toggle_popup_menu",function(){` where container is a tag or objct(document for example) that exists at load time. Seeing `$("#popup_checkbox");` makes me believe you have duplicate IDs too. IDs MUST be unique – mplungjan Jun 19 '16 at 13:42
  • The #popup_checkbox id is unique, I have only one checkbox with that id. – apielotje Jun 19 '16 at 14:09

0 Answers0