"Undefined" value in input (jQuery)

Question

Please help, why instead of Input data appears Undefined?

HTML:

    <div id="au">
        <div id="allow">  
        <p class="tf">Allow From:</p><br>

        <center><button id="aadd1">+</button><br></center>  
        </div><br>            
        <div id="deny">  
        <p class="tf">Deny From:</p><br>

        <center><button id="aadd2">+</button><br></center>
        </div>
    </div>
 <center><button id="go">gogogo</button></center>

 <span id="x"></span>

JavaScript:

$(document).ready(function(){
    var a1 = 0;
    var a2 = 0;

    $("#aadd1").click(function(){
        $("#allow").append('<input class="lf" id="a-'+(++a1)+'" type="text"><br><br>');
    });
    $("#aadd2").click(function(){
        $("#deny").append('<input class="lf" id="a-'+(++a2)+'" type="text"><br><br>');
    });

    var al="";
    var den="";
    var ad="";


    $('#allow input').bind('blur keyup',function() {
        $(this).data('allow', "Allow from " + $(this).val() + "<br>");
       });
    $('#deny input').bind('blur keyup',function() {
        $(this).data('deny', "Deny from " + $(this).val() + "<br>");
       });


$('#go').click(function(){
        $("#allow input").each(function(){
            if($(this).val()){
                al += $(this).data('allow') + "\n" || '';
            }
          });
        $("#deny input").each(function(){
            if($(this).val()){
                den += $(this).data('deny') + "\n" || '';
            }
          });
    ad = "Order deny,allow <br>" + al + den;
    $("#x").html(ad);
});
});

Mark Coleman · Accepted Answer · 2011-08-28 10:41:51Z

2

Since you are creating the input fields dynamically .bind() will not work for future elements. Change .bind() to use .live() and it appears to work correctly.

$('#allow input').live('blur keyup', function() {
    $(this).data('allow', "Allow from " + $(this).val() + "<br>");
});
$('#deny input').live('blur keyup', function() {
    $(this).data('deny', "Deny from " + $(this).val() + "<br>");
});

answered Aug 28, 2011 at 10:41

Mark Coleman

40.9k9 gold badges84 silver badges101 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Trefex Over a year ago

You can also look at .delegate()

Trefex · Accepted Answer · 2011-08-28 10:45:46Z

0

You can also use .delegate() which you can read upon here

http://api.jquery.com/delegate/

answered Aug 28, 2011 at 10:45

Trefex

2,34016 silver badges18 bronze badges

Collectives™ on Stack Overflow

"Undefined" value in input (jQuery)

2 Answers 2

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related