如何在Jquery中对克隆元素应用验证?

时间:2015-07-21 05:16:14

标签: javascript jquery validation

有一个带标签的文本框;对isnumeric进行验证。

public class CPanel extends JPanel {
    private JScrollPane scrollPane ;
    private JPanel content ;
    private JEditorPane demo ;

    public CPanel(){

        scrollPane = new JScrollPane() ;
        content = new JPanel() ;
        scrollPane.setViewportView(content); 
        content.setLayout(new BoxLayout(content, BoxLayout.Y_AXIS));

        try{
         java.net.URL text = CPanel.class.getResource("demo.txt") ;
        demo = new JEditorPane(text) ;
        }catch(Exception e){
            System.out.println("Something bad happened with the file") ;
        }

        //These need to be added to the contentpanel
        content.add(demo) ;
        JButton demob = new JButton("Button 1") ;
        JButton demob2 = new JButton("Button 2") ;
        content.add(demob) ;
        content.add(demob2) ;

        //Here we need to add the scrollPane, to which the JPanel 
        //with BoxLayout has been added
        this.setLayout(new BorderLayout());
        this.add(scrollPane, BorderLayout.CENTER);
    }
}

在运行时,我创建了上面的克隆;通过单击名为add的按钮;这创建了另一个具有不同id和其他属性相同的文本框;说。

Money: <input type="text" id="dollar" name="dollar" data-require-numeric="true" value=""> 
//Textbox with id dollar0 

在两个文本框上,data-require-numeric为true。

问题:对于默认文本框,JQuery验证正在执行。但对于新的克隆; JQuery没有运行。

以下是jquery:

Money: <input type="text" id="dollar1" name="dollar1" data-require-numeric="true" value="">
//Cloned textbox; cloned by clicking on a button named clone

如何解决这个问题?

2 个答案:

答案 0 :(得分:1)

试试这个:您需要使用.on()注册点击事件处理程序,方法是注册document的点击处理程序,该处理程序将事件委托给'input[type="text"][data-require-numeric]'。这样您就可以处理动态添加元素的事件。

var economy= { 
init: function () {
$(document).on("change keyup paste",'input[type="text"][data-require-numeric]', 
    function () {
        check isnumeric; if yes then border red
    });
}};
$(economy.init);

答案 1 :(得分:0)

在动态dom元素上绑定change事件。使用类引用而不是id。并将事件绑定到其父级,如

&#13;
&#13;
$(document).ready(function(){

$(".parent").on("keyup",".dynamicdom",function(e){
value = $(e.target).val()

//then do your validation here. and you can attach multiple events to it
})

})
&#13;
<div class="parent">
  <input type="text" class="dynamicdom" >
  <input type="text" class="dynamicdom" >
 </div>
&#13;
&#13;
&#13;