Dynamic row added to table: adding click event doesn't trigger

Question

Brain ache.

I have a timer that dynamically adds row to a table. I want an event to fire when the user clicks on one of the dynamically added rows.

I'm tagging each for with a class of "PortletTableUseButton" and using the .on("click") but it doesn't work.

    $('.PortletTableUseButton').on("click", function () {
        alert($(this));
    });
    setInterval(function () { addRow(); }, 2000);

    var counter = 2042;
    function addRow() {
        counter++;
        var myRow = "<tr class='PortletTableUseButton'><td>BLOCK-" + counter + "</td><td>Location A</td><td >Use</td></tr>";

        $("#Portlet #content tr:last").after(myRow);
    }
<div id="Portlet" style="position:absolute; top:500px;left:500px; height:200px;">
    <div id="content" style="height:80%;">
        <table id="PortletTable">
            <tr>
                <td>File Name</td>
                <td>Location</td>
                <td>Action</td>
            </tr>
        </table>
    </div>
</div>

isherwood · Accepted Answer · 2015-06-23 17:43:26Z

4

You aren't using event delegation correctly. Try this:

$(document).on('click', '.PortletTableUseButton', function () { ... });

http://learn.jquery.com/events/event-delegation/

Alternatively, run your click function each time you add a row.

answered Jun 23, 2015 at 17:43

isherwood

61.4k16 gold badges122 silver badges173 bronze badges

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

3 Comments

Proveniebam Over a year ago

Thanks but no change. The event doesn't get triggered.

isherwood Over a year ago

Sure it does. Are you seeing any syntax or other errors in the console? What does your HTML look like after a row has been added?

Proveniebam Over a year ago

Thank you sir. you were right: you're code was correct. Thanks for the help: my brain's not aching so much now.

Collectives™ on Stack Overflow

Dynamic row added to table: adding click event doesn't trigger

1 Answer 1

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related