jquery - I can't select the parent element of an element that was created dynamically -

this <ul> holds list items in first place:

<ul style="max-width:500px" id="currentroles" class="list-group">      <li class="currentrole list-group-item">             <div class="col-md-6">                 @role.name             </div>             <a href="#" class="linkremoverole">remove role</a>      </li> </ul> 

i remove list items , append them new list using codes below , works fine:

  $('.linkremoverole').click(function (event) {             var rolename = $(this).siblings().text();             $(this).parentsuntil('#currentroles').remove();             $('#removedroles').append(               '<li class="removedrole list-group-item">'             + '<div class="col-md-6">'             + rolename             + '</div>'             + '<a href="#" class="linkaddroleback">add item back</a>'             + '</li>');         }); // end of .remove_field click 

then want list items clicking link has class "linkaddroleback" has created codes above:

 $('.linkaddroleback').click(function (event) {             var rolename = $(this).siblings().text();             $(this).parentsuntil('#removedroles').remove();              //$('#currentroles').append(                // irrelevant code...                );         }); 

here's problem comes in. want remove parent element while click link "add role back" turns out can't. checked console , seems can't select parents

 $(this).parentsuntil('#removedroles').remove(); 

but works fine if

 $('.linkaddroleback').parentsuntil('#removedroles').remove(); 

anybody knows reason?

use $(document).on event :

$(document).on('click','.linkaddroleback',function (event) {        var rolename = $(this).siblings().text();        $(this).parentsuntil('#removedroles').remove(); });