Cannot delete element created by jQuery

Question

I use SignalR to push notifications. To be simple, I have created some elements using the following jQuery code:

<script>
    $(document).ready(function(){
        var connection = new signalR.HubConnectionBuilder().withUrl("/signalRServer").withAutomaticReconnect().build();
        connection.start();

        connection.on("ReceiveNotification", function(sender, workCenter, serviceType, notificationId){
            event.preventDefault();
            if($('#notifi-badge').length){
                var currentNotificationCount = parseInt($('#notifi-badge').text());
                $('#notifi-badge').text(currentNotificationCount + 1);
                $('.notification-items').prepend('<li><a class="dropdown-item notification-item" style="font-family: vazir !important" Id="'+ notificationId +'" href="#">New '+ serviceType +' for '+ workCenter +' sent.</a></li>');
            }else{
                $('#notifi-badge').text('1');
            }
        });
    });
</script>

and I use the following code to detect those created items:

<script>
    $(document).ready(function(){
        $('.notification-item').on("click", function(){
        var selectedId = $(this).attr('Id');
        var notificationBadge = parseInt($('#notifi-badge').text());
        var formData = new FormData();
        alert(selectedId);

. . .

</script>

SignalR works fine and I can push notifications. When I click those created elements, I expect to alert but it does not.

score 0 · Accepted Answer · answered Jan 16 '22 at 17:10

Listen to the click event bubbling up from .notification-item to the nearest parent that is present at runtime: see event delegation using .on(). Your issue is due to .notification-item being dynamically added and is not available at runtime, so no click event handler is bound to it.

Without looking at your markup, is it not clear which is the nearest parent that is present at runtime: in this case I can suggest listening to the click event at the level of the document instead:

$(document).on('click', '.notification-item', function(){ ... })

If the element .notification-items (the parent that you're appending elements to) is indeed present at runtime, then you can do this:

$('.notification-items').on('click', '.notification-item', function(){ ... })

One level up is "ul". I tried `$('.notification-item').on("click", "ul", function(){` but it did not work. — , Jan 16 '22 at 17:20
You got the arguments switched around. You should listen to the element that is present at runtime, i.e. `$('ul').on('click', '.notification-item', function(){` But I would not suggesting listening to `ul` because it can be anywhere on the page and create unnecessary overhead. Read the documentation on `.on()` and you will see why your code didn't work https://api.jquery.com/on/ — Terry, Jan 16 '22 at 17:22

Daniella c · Answer 2 · 2022-01-16T17:11:05.093

The click event is not binded to new attached items(.notification-item). To do so, you have to rebind events when each new items added:

call the event binding function after new element prepended:

 <script>
     $(document).ready(function(){
         var connection = new signalR.HubConnectionBuilder().withUrl("/signalRServer").withAutomaticReconnect().build();
         connection.start();
         connection.on("ReceiveNotification", function(sender, workCenter, serviceType, notificationId){
             event.preventDefault();
             if($('#notifi-badge').length){
                 var currentNotificationCount = parseInt($('#notifi-badge').text());
                 $('#notifi-badge').text(currentNotificationCount + 1);
                 $('.notification-items').prepend('<li><a class="dropdown-item notification-item" style="font-family: vazir !important" Id="'+ notificationId +'" href="#">New '+ serviceType +' for '+ workCenter +' sent.</a></li>');
                 bindEvent();
             }else{
                 $('#notifi-badge').text('1');
             }
         });
     });
 </script>

and declare bindEvent function

 function bindEvent(){
     $('.notification-item').unbind("click").bind("click", function(){
         var selectedId = $(this).attr('Id');
         var notificationBadge = parseInt($('#notifi-badge').text());
         var formData = new FormData();
         formData.append("notificationId", selectedId);
         $.ajax({
             type: "POST",
             url: "/Page/DeleteNotification",
             contentType: false,
             processData: false,
             data: formData,
             success: function(response){
                 if(response.success){
                     $('#'+ selectedId +'').remove();
                     if(notificationBadge >= 1){
                         $('#notifi-badge').text(notificationBadge - 1);
                     }else{
                         $('.badge-notification').remove();
                     }
                 }else{
                     console.log("Error! Removing process failed.");
                 }
             }
         });
     });
 }

Cannot delete element created by jQuery

2 Answers2