Search code examples
javascripthtmljquerythymeleaf

Javascript - add click listener to loaded html

I have a previous question re loading html via ajax:

javascript - load html content from ajax call

but I face small issue with attaching a click listener:

<html th:remove="tag" xmlns:th="http://www.thymeleaf.org" xmlns:ber="http://berwickinsurance.com/thymeleaf"
    xmlns:eph="http://ephibian.com/thymeleaf" xmlns:layout="http://www.ultraq.net.nz/thymeleaf/layout">
<div>
<div id="note-list-container2">
 ....
</div>
<div id="file-list-container2">

    <table style="width: 100%; height: 100%" class="table">
        <thead>
        <tr>
            <th></th>
            <th>Name</th>
            <th>Category</th>
            <th>Created On</th>
            <th>Size</th>
            <th></th>
        </tr>
        </thead>
        <tbody>
        <th:block th:each="note : ${model.notes}" th:object="${note}">
            <tr th:each="file : *{files.data}" th:object="${file}">
                <td><i
                        th:replace="~{layout/custom-frag::file-ico(*{mimeType})}"></i></td>
                <td><a target="file"
                       th:href="@{*{#uris.escapePath('/files/'+id+'/'+name)}}"><strong
                        th:text="*{name}">contractUHCSigned.pdf</strong></a></td>
                <td><span class="badge" th:text="${note.category.name}">Category</span>
                </td>
                <td> <span th:text="*{#joda.defaultDateTime(createDate)}">Create On</span></td>
                <td><th:block
                        th:text="*{#prettyTime.humanReadableByteCount(size, true)}">400 kb</th:block>
                </td>
                <td><a target="file"
                       th:href="@{*{#uris.escapePath('/files/'+id+'/'+name)}}">View</a></td>
                <td ><a id="noteFileDeletion"  onClick="handleFiledeletion()"  title="Remove File" class="delete-btn text-danger"  data-confirm="delete file"><i class="fa fa-remove"></i></a></td>
            </tr>
        </th:block>
        </tbody>
    </table>
</div>
</div>
   <script>
function handleFiledeletion(){
.....
}
</script>
</html>

It's not triggering the handleFiledeletion method.

I tried another approach:

$("#noteFileDeletion").on('click', function() {
        var deleteBtn = $(this);
        var url = $(this).data('url');
        url = url +"?csrf_token="+App.config.csrfToken;
        var msg = "Are you sure you want to "+$(this).data('confirm')+"?";
        bootbox.confirm(msg, function(result){
            if(result){
                $.ajax({
                    processData : false,
                    "type" : "DELETE",
                    "url" : url,

                })
                    .success(function( data ) {
                        window.location.href='/applicationProducts';
                    });
            }
        });
    });

but it's not triggering the event handler either.

What I missing?

Solution

  • When using .on(), you must be sure that you attach the .on() listener to an element that is already in the DOM at initial page load.

    Try this - if it works, then you can try moving the listener further down the tree:

    $(document).on('click', function(){
   var deleteBtn = $(this).find('#noteFileDeletion');
   etc.

    Update:

    I've updated the above code with the missing bit - many thanks to @David for catching the omission.

    $(document).on('click', '#noteFileDeletion', function(){
    alert('You clicked ID noteFileDeletion');
});