How to use keyup function on input which is added via java script?

Question

I have added an input via the append function. But the keyup function is not working on the appended input.

When after clicking on add button the new input is visible but the keyup function is not working.

Can someone help so that keyup function works on each input?

    $(document).ready(function() {
        //Try to get tbody first with jquery children. works faster!
        var tbody = $('#myTable').children('tbody');

        //Then if no tbody just select your table 
        var table = tbody.length ? tbody : $('#myTable');


        $('button').click(function() {
            //Add row
            table.append(
                '<tr><td>2</td><td><input class="keyp" id="inputform" type="text"></td><td class="sid"></td></tr>'
            );
        });

        $('.keyp').on("keyup input", function() {
            $('.keyp').parent().siblings(".sid").html($(this).val());
        });
    });

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

    <button>Add row</button>
    <table id="myTable" class="table">
        <tbody>
            <tr>
                <td>1</td>
                <td><input class="keyp" id="inputform" type="text"></td>
                <td class="sid"></td>
            </tr>
        </tbody>
    </table>

Add the event listener to the table instead and use event delegation: $('table').on("keyup input", '.keyp', function()... — Andy
– Andy, Commented May 16, 2021 at 8:44

Andy · Accepted Answer · 2021-05-16 09:02:14Z

1

Thanks to @andy I got the answer.

Have to use event delegation so the updated js code for keyup function is

$('table').on("keyup input", '.keyp', function() {
  $(this).parent().siblings(".sid").html($(this).val());
});

edited May 16, 2021 at 9:02

Andy

63.6k13 gold badges72 silver badges99 bronze badges

answered May 16, 2021 at 8:59

Mudit Khandelwal

113 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

How to use keyup function on input which is added via java script?

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related