jQuery：動的に追加された行ごとにぼかし機能が呼び出されない

-2

jQueryの初心者です。動的に追加された各行でぼかし機能を呼び出して、両方のテキストボックスの各行の値をPHPに送信しようとしています。
最初の行は動作しますが、動的に追加された行は機能しません。次のように
私のコードは次のとおりです。
HTMLとjQuery：jQuery：動的に追加された行ごとにぼかし機能が呼び出されない

<!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;

私はそれを取得しておりません。私に示唆してください。事前に感謝します。

出典

2016-09-30 Soumya

on()を使用して、DOMに動的に追加された要素をバインドします。

DOMは準備ができているときにはそれらの要素がなく、それらを動的に追加するとDOMがそれらを理解しないためです。

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

そして、私はあなたが同じid #co_qtyを持つ複数の要素（テキストボックス）をしましたことを見ることができ、それが問題を引き起こします。

動的に追加された要素に適用するには、.co_qtyを使用する必要があります。

出典

2016-09-30 07:41:15

ありがとうございます。しかし、呼び出される各動的行の最初の行の値だけが表示されます。 – Soumya

動的に追加される各要素に動的セレクタを追加する必要があります。 –

jQuery：動的に追加された行ごとにぼかし機能が呼び出されない

答えて

関連する問題