由类创建的字段不会被jquery侦听器捕获,并且事件不会被触发

时间:2014-02-25 20:44:31

标签: jquery forms listener

我有一个通过循环数组创建的表单:

  $fields = array('firstName' => array(   'id' => 'firstName',
                                    'name'=>'firstName',
                                    'label'=>'First Name',
                                    'class'=>'fill',
                                    'size'=>'32',
                                    'maxLength'=>'32'),

            'lastName' => array(    'id' => 'lastName',
                                    'name'=>'lastName',
                                    'label'=>'Last Name',
                                    'class'=>'fill',
                                    'size'=>'32',
                                    'maxLength'=>'32'),

将结果传递给构建表单的类:

 $form = new Form;
 echo "<div class='leftCenter'>" . $form->text($id,$name,$class,"someValue",$size,$maxLength) . "</div>";

班级:

class Form{
    public function text($id,$name,$class,$value,$maxLength,$size)
    {
            $str = "<input type='text' name='" . $id . "' id='" . $name. "' value='" . $value . "' size='" . $size . "' maxLength='" . $maxSize . "'>\n";
            return $str;
    }
 }

和结果:

    <input type='text' name='firstName' id='firstName' class='fill' size='12' maxLength='32'>
    <input type='text' name='lastName' id='lastName' class='fill' size='12' maxLength='32'>

我有一个正在侦听更改事件的jquery侦听器

    $('.fill').on('change', function(){
            alert($(this).val());
    });

我也试过

    $('.fill').blur(function(){
            alert($(this).val());
    });

    $('.fill').change(function(){
            alert($(this).val());
    });

有趣的是,如果我将类和jquery的输入行结果复制/粘贴到小提琴中,它可以正常工作。我猜是某种代表团问题......

一切都很好,除了我无法解除警报......

1 个答案:

答案 0 :(得分:1)

你是对的,这是一个授权问题。由于这些元素在渲染时不存在于DOM中。该活动将无法正确附加。您需要将事件附加到已存在的元素(例如body元素),然后使用fill类将处理程序委托给您的输入。试试这个:

$( "body" ).on( "change", ".fill", function() {
    alert( 'test');
 });

我希望这有帮助!您将希望将该代码放在文档就绪处理程序中。