php - jQuery not working on elements created by jQuery -

i dynamically adding list items list in jquery through ajax call called every second.

below code ajax call.

$.ajax({     url: 'php/update_group_list.php',     data: '',      datatype: 'json',     success: function(data) {         var id = data.instructor_id;             group_cnt = data.group_cnt,             group_name = data.group_name,             group_code = data.group_code;              (i = current_row; < group_cnt; i++)             {                 //setinterval(function() { $('#group-list-div').load('php/group_list.php'); }, 5000);                  $('#group-list').append("<li><a href='#' data-role='button' class='view-group-btns' id='"+group_code[i]+"' value='"+id+"' text='"+group_name[i]+"'>"+group_name[i]+"</a></li>");                 $('#delete-group-list').append("<fieldset data-role='controlgroup data-iconpos='right'>" +                                                     "<input id='"+group_code[i]+i+"' value='"+group_code[i]+"' type='checkbox' name='groups[]'>" +                                                     "<label for='"+group_code[i]+i+"'>"+group_name[i]+"</label>" +                                                 "</fieldset>");             }              current_row = i;               $('#group-list').listview('refresh');             $('#delete-group-list').trigger('create');     } }); 

now having 2 problems

first problem:

when try run code below (it should show alert box if of list items created in line $('#group-list').blah...blah in code above), nothing happens.

$(".view-group-btns").click(function()  {     alert("check"); }); 

second problem:

also when try send form data checkboxes (referencing line $('#delete-group-list').blah...blah in ajax call code above) post returns error unexpected token <

what doing wrong? think 2 problems related creating list items used dynamically.

---

here code relating second problem

html:

<form id='delete-group-form' action='php/delete_groups.php' method='post'>     <h3 style='text-align: center;'>check box beside groups delete </h3>     <div style='margin-top: 20px;'></div>         <div id='delete-group-list'>         </div>     <div style='margin-top: 20px;'></div>     <input type='submit' id='delete-groups-btn' data-theme='b' value='delete groups(s)'>                     </form> 

js code

$('#delete-group-form').submit(function(e)  {     e.preventdefault();      alert($('#delete-group-form').serialize());      if ($('#delete-group-form').serialize() == "")      {         alert('no groups selected deleted.')         return false;     }     else          if ($('#delete-groups-form').serialize() == null)          {             alert('no groups selected deleted.')             return false;         }          else          {             $.post('php/delete_groups.php',$('#delete-groups-form').serialize()).done(function(data)              {                 obj = jquery.parsejson(data);                   var group_codes = obj.group_list;                  alert(group_codes);                  alert("the selected groups have been deleted");                 window.settimeout(2000);                 return false;             });         }     return false; }); 

delete_groups.php

<?php      $group_codes = $_post['groups'];         $items = array('group_list'=>$group_codes); //creating array of data sent js file     echo json_encode($items); //sending data through json encoding ?> 

i think root of second problem line $group_codes = $_post['groups']; specfically $_post['groups'] because when replace $group_codes = 'test'; (just debugging purposes) , code works expected.

you need use event delegation make newly-created elements function properly:

$("#group-list").on("click", ".view-group-btns", function() {     alert("check"); });