Question

我尝试在HTML元素上进行验证，它通过PHP打印但是它不起作用，但是当我在没有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之后（在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工作在print元素上？

2 个答案: