为什么 jQuery 无法通过 PHP 处理打印元素？

Question

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

下面是HTML，其中实际数据将通过AJAX打印：

<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

您的标记中没有包含 class optradio 的元素。相反，有一个属性 name 等于 optradio:

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

更新

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

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

您正在尝试 select 准备好文档中的一个元素，但是此元素 不存在 到 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

为什么 jQuery 无法通过 PHP 处理打印元素？

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

javascript

php

jquery

html

bootstrapvalidator