jQuery：動的に追加された行でblur（）が動作しない

Question

Blurイベントが呼び出されると、警告ボックスが表示されます。

ぼかしイベントは、デフォルトの行では機能しますが、動的に追加される行では機能しません。

私はクラスセレクタも試みましたが、うまくいきませんでした。

HTML：

<table class="test"> 
    <tr><td><input type="button" value="Add" class="plusbtn" /></td> 
    <td><input type="button" value="Remove" class="minusbtn" /></td></tr> 
<tr><th>Fname</th><th>Lname</th> 
</tr> 
<tr> 
    <td><input type='text' id="Fname" ></td> 
    <td><input type='text' id="Lname" ></td> 
</tr> 
    </table> 

のjQuery：

<script 
src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"> 
</script> 
<script> 
    $(document).ready(function(){ 
     var markup = "<tr><td><input type='text' id='Fname' ></td><td><input type='text' id='Lname'></td></td></tr>"; 
      $('.plusbtn').click(function() { 
      $(".test").append(markup); 
     }); 
     $('.minusbtn').click(function() { 
      if($(".test tr").length != 1) 
       { 
        $(".test tr:last-child").remove(); 
       } 
      else 
       { 
        alert("You cannot delete first row"); 
       } 
     }); 
     var $Fname=$("#Fname"); 
     var $Lname=$("#Lname"); 

     $('#Fname').on('blur',function(){ 

      alert($Fname.val()) 
     }); 
    }); 
</script> 

私は事前にsuggestions.Thanksを作るissue.Pleaseを解決することができません。

Answer 1

あなたはすべてのリックで同じIDを持っていますが、これは動作しません。

はまた、あなたは、動的な要素間違っにイベントをバインドされています

$(static_element).on('event', 'dynamic_element', function) 

$(document).on('blur', '.Fname', function() {});