cannot execute jquery after on append html

Question

I am appending html by taking code from data-prototype attribute from one div.

The problem is this that I am appending with two select boxes on which I want to run later jquery, as I want to update second one after choosing option from first one, it is just not executing jQuery code. Everything is alright on select boxes which are inserted when page is loading, but for those from append it doesn't work.

My jQuery Code:

var $optionDefinitions = $('.option-definitions');
var collectionHolder = $('div#epos_productsbundle_variant_options');
var $addOptionsLink = $('<a href="#" class="add_options_link">Add an option</a>');
var $newLinkLi = $('<li></li>').append($addOptionsLink);

$(function() {
    collectionHolder.append($newLinkLi);
    collectionHolder.data('index', collectionHolder.find(':input').length);

    $addOptionsLink.on('click', function(e) {
        e.preventDefault();
        addOptionsForm(collectionHolder, $newLinkLi);
    });

    function addOptionsForm(collectionHolder, $newLinkLi) {
        var prototype = collectionHolder.data('prototype');
        var index = collectionHolder.data('index');
        var newForm = prototype.replace(/__name__/g, index);
        var $newFormLi = $('<li id="subform_'+index+'"></li>').append(newForm);

        $newLinkLi.before($newFormLi);
        collectionHolder.data('index', index + 1);
    }


   $optionDefinitions.change(function(event){
       var $optionid = $(this).val();
       var url = '{{ path('variant_options', {'id': 'optionid' }) }}'
       url = url.replace("optionid", $optionid)
       $.ajax({
           url: url,
           dataType: "html",
           success: function(data){
              $(event.target).next('select').html(data);
           },
           error: function(){
             alert('failure');
           }
        });
    })
});

Answer 1

I found the problem. After append I should use on.

So instead of

$optionDefinitions.change(function(event){
   var $optionid = $(this).val();
   var url = '{{ path('variant_options', {'id': 'optionid' }) }}'
   url = url.replace("optionid", $optionid)
   $.ajax({
       url: url,
       dataType: "html",
       success: function(data){
          $(event.target).next('select').html(data);
       },
       error: function(){
         alert('failure');
       }
    });
})

I got know

$(body).on('change', $optionDefinitions, function(event){
   var $optionid = $(event.target).val();
   var url = '{{ path('variant_options', {'id': 'optionid' }) }}'
   url = url.replace("optionid", $optionid)
   $.ajax({
       url: url,
       dataType: "html",
       success: function(data){
          $(event.target).next('select').html(data);
       },
       error: function(){
         alert('failure');
       }
    });
})