为什么 jQuery 不能通过 PHP 处理打印元素？

Question

我尝试对通过 PHP 打印的 HTML 元素进行验证，但它不起作用，但当我在没有 PHP 的情况下放置相同的 HTML 时，它确实有效。

下面是通过 AJAX 打印实际数据的 HTML：

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

这里是 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();

这是通过 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>
        ';

这是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 类的元素。相反，有一个属性name 等于optradio：

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

更新

如果我理解正确，#menu1_info 元素来自 ajax 响应

$(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