0

Once Blur event is called, alert box should be displayed.

Blur event is working for default row, but not in dynamically added rows.

I even tried class selector also but didn't worked.

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>

I am unable to solve the issue.Please make suggestions.Thanks in advance.

Soumya
  • 67
  • 1
  • 7
  • You need to use a delegated event handler for elements you append to the DOM after load. See the question I marked as duplicate for more information. Also be aware that you're duplicating `id` attributes when the HTML gets appended - you should change the `id` to `class` for the `input` elements – Rory McCrossan Jan 12 '17 at 08:03
  • Try this one is working fine : $("table").on("blur", "#Fname", function(){ alert('hello'); }); – Kishan Patel Jan 12 '17 at 08:16

1 Answers1

2

You have same ID on every lick, this will not work.

Also you are binding event to dynamic element wrong:

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

$(document).on('blur', '.Fname', function () {});
Justinas
  • 41,402
  • 5
  • 66
  • 96