jQuery: Blur-Funktion ruft nicht jede dynamisch hinzugefügte Zeile auf

-2

Ich bin Neuling zu jQuery.Ich versuche, die Funktion Blur auf jeder dynamisch hinzugefügten Zeile aufzurufen und die Werte jeder Zeile beider Textfelder an PHP zu senden.
Für die erste Zeile funktioniert es aber dynamisch hinzugefügt Zeilen, es funktioniert nicht.
My-Code ist wie folgt:
HTML und JQuery:jQuery: Blur-Funktion ruft nicht jede dynamisch hinzugefügte Zeile auf

<!doctype HTML> 
    <html> 
    <head> 
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script> 
    </head> 
    <script type="text/javascript"> 
    var rowCount = 1; 
    function addMoreRows(frm) { 
    rowCount ++; 
    var recRow = '<p id="rowCount'+rowCount+'"><tr><td><input name="" type="text" id="co_name" size="17%" maxlength="120" /></td><td><input name="" type="text" id="co_qty" maxlength="120" style="margin: 4px 5px 0 5px;"/></td></tr> <a href="javascript:void(0);" onclick="removeRow('+rowCount+');">Delete</a></p>'; 
    jQuery('#addedRows').append(recRow); 
    } 

    function removeRow(removeNum) { 
    jQuery('#rowCount'+removeNum).remove(); 
    } 
    </script> 
    <body> 
    <table rules="all" style="background:#fff;"> 
    <tr> 
    <td style="font-size:14px;" >Name</td> 
    <td style="font-size:14px;" >Email</td> 

    <td><span style="font:normal 12px agency, arial; color:blue; text-decoration:underline; cursor:pointer;" onclick="addMoreRows(this.form);"> 
    Add More 
    </span> 
    </td> 
    </tr> 
    <tr id="rowId"> 
    <td><input name="" type="text" id="co_name" value="" size="17%"/></td> 
    <td><input name="" type="text" id="co_qty" value="" /></td> 

    </table> 
    <div id="addedRows"></div> 
    </td> 
    </tr> 
    <script> 
    $(document).ready(function(){ 
     $('#co_qty').on('blur',function() { 
    var username = $('#co_name').val(); 
    var password = $('#co_qty').val(); 
    $.ajax({ 
      type: "POST", 
      url: "blur.php", 
      data: {'title':username ,'title1':password}, 
      success: function(msg) { 
     alert(msg)    } 

    }); 
    }); 
    }); 

    </script> 
    </body> 
    </html><br>

blur.php

$var=$_POST['title']; 
$var1=$_POST['title1']; 
echo $var."Success!".$var1;

ich es nicht immer bin. Bitte schlagen Sie mir vor. Vielen Dank im Voraus.

Quelle

2016-09-30 Soumya

Verwenden Sie on(), um dynamisch hinzugefügte Elemente im DOM zu binden.

Da, wenn DOM bereit ist, hat es diese Elemente nicht und wenn Sie diese dynamisch hinzufügen, versteht DOM diese nicht.

$('body').on('blur','.co_qty', function() { 
    //Your code 
});

Und ich kann sehen, dass Sie mehrere Elemente (Text-Box) mit der gleichen ID #co_qty, es habe Probleme verursachen.

Sie müssen .co_qty verwenden, um auf dynamisch hinzugefügte Elemente anzuwenden.

Quelle

2016-09-30 07:41:15

Thank.But zeigt nur den Wert der ersten Zeile in jedem dynamisch aufgerufenen Zeilen. – Soumya

Sie müssen den dynamischen Selektor zu jedem Element hinzufügen, das dynamisch hinzugefügt wird. –

jQuery: Blur-Funktion ruft nicht jede dynamisch hinzugefügte Zeile auf

Antwort

Verwandte Themen