Question

Please help, why instead of Input data appears Undefined?

jsFiddle

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);
});
});

Answer 1

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>");
});