jQuery가 PHP를 통해 인쇄 요소에서 작동하지 않는 이유는 무엇입니까?

Question

PHP를 통해 인쇄되는 HTML 요소에 대한 유효성 검사를 시도했지만 작동하지 않지만 PHP없이 동일한 HTML을 넣을 때 작동합니다. 여기

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(); 

가 아약스를 통해 에코됩니다 실제 데이터입니다 :

여기

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

는 AJAX입니다 : 아래

은 실제 데이터가 AJAX를 통해 인쇄 할 수있는 HTML입니다

$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> 
     '; 

다음은 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

마크 업에 클래스 optradio의 요소가 없습니다. 대신 optradio에 속성과 동일한 name 하나가 :

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

UPDATE

내가 제대로 이해하면, #menu1_info 요소는 선택하려고 여기

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

아약스 응답에서 온다 문서의 요소가 준비되었지만이 요소가 이 아니므로 DOM에이 아직 존재하지 않습니다. 비동기식으로 (문서 준비 이벤트 이후)이 추가됩니다.

따라서 대상 요소가 DOM에있는 경우 (ajax 콜백 함수에서) 플러그인을 초기화해야합니다.

// 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({ ... }); 
    } 
}); 

Answer 2

응답에 '.optradio'과 같은 요소가 없습니다.

더 나은이로 변경 :

$('#live_data').on('change', ':radio', function() { 
    alert("Radio button clicked"); 
}); 

또한 당신은 당신의 경우 #live_data