Why jQuery is not working on the printed-element via PHP?

Question

I tried validation on HTML element which get printed via PHP but it is not working, but it does work when I put the same HTML without PHP.

Below is the HTML in which the actual data will be printed via AJAX:

<div class="row" id="live_data">
    // here will all radio buttons and images echo via ajax
</div>

Here is the AJAX:

function fetch_all() {
      var form_name = 'package_form2';
       $.post('ajax/ajax_form_get_all_packages.php',{form_name:form_name}, function(result) {
            console.log(result);
            $('#live_data').html(result);
        });    
} fetch_all();

Here is the actual data which gets echoed via Ajax:

$output .= '
        <div class="col-md-4">
            <label for="'.$id.'">
                <img src="uploads/'.$img.'" class="img-responsive">
            </label>
            <div>
                <div class="radio text-center">
                <input type="radio" id="'.$id.'" value="'.$code.'" name="optradio" class="optradio">
                </div>
            </div>
        </div>
        ';

Here is the code of FormValidation:

$(document).ready(function() {
    $('#menu1_info').formValidation({
        message: 'This value is not valid',
        icon: {
            invalid: 'glyphicon glyphicon-remove',
            validating: 'glyphicon glyphicon-refresh'
        },
        fields: {

            optradio: {
                validators: {
                    notEmpty: {
                        message: 'Please choose one of the Package'
                    }
                }
            }
        }
    })
    .on('success.form.fv', function(e) {
            // Prevent form submission
            e.preventDefault();

            // Get the form instance
            var $form = $(e.target);

            // Get the BootstrapValidator instance
            var fv = $form.data('formValidator');


        $form.bootstrapValidator('disableSubmitButtons', false);

        });   
});

Answer 1

There is no element with class optradio in your markup. Instead there is one with attribute name equal to optradio:

$(document).on('change', '[name="optradio"]', function() {
    alert("Radio button clicked");
});

UPDATE

If I understood correctly, #menu1_info element comes from the ajax response

$(document).ready(function() {
    $('#menu1_info').formValidation({

Here you are trying to select an element on document ready, but this element is not present to the DOM yet because it is appended asynchronously (after document ready event).

So, you have to initialize your plugin after the target element is present to the DOM (in the ajax callback function).

// The $('#menu1_info') element is not present now
$.ajax({
   url: '...',
   ...,
   success: function(data) {
      // Append data from ajax call
      $('#target').append(data);
      // Now, $('#menu1_info') element is present
      $('#menu1_info').formValidation({ ... });
   }
});