Add event to an element created with javascript

[raduenea]

Hello,

Plese help me with this situation.

For exemple I want to show alert when I click on EDIT link.

Now when I click on EDIT nothings happen.

Here's the code:

<script>

    function loadData() {
        var table_body = '<table border="1"  id="table">';
        table_body += "<tr>";
        table_body += "<td>Some text</td>";

        table_body += "<td><a href='#' id='edit'>EDIT</a></td>";
        table_body += "</tr>";
        table_body += "</table>";
    }

        $(document).ready(function () {
            loadData();
            $("#edit").on("click", function () {
                alert('hohoho');
            });
        });
</script>  

Thanks

[requinix]

Where are you using table_body?

[raduenea]

2 hours ago, requinix said:

Where are you using table_body?

<script>

    function loadData() {
        var table_body = '<table border="1"  id="table">';
        table_body += "<tr>";
        table_body += "<td>Some text</td>";

        table_body += "<td><a href='#' id='edit'>EDIT</a></td>";
        table_body += "</tr>";
        table_body += "</table>";
      
      	$("#tableDiv").html(table_body);
    }

        $(document).ready(function () {
            loadData();
            $("#edit").on("click", function () {
                alert('hohoho');
            });
        });
</script>  

	<p id="tableDiv"></p>

 

[kicken]

You need to use a delegated event which involves

1. Adding the event to some parent element that will always exist and
2. Adding a selector argument when calling the .on method.

$('#tableDiv').on('click', '#edit', function(){
   alert('Hi!');
});