Link to home
Start Free TrialLog in
Avatar of Soumen Roy
Soumen RoyFlag for India

asked on

Adding a Javascript click event to an HTML element given a class dynamically

Hello,

The following piece of codeshows a function that is called from an ajax request success function. The argument to this may contain an array or null. In case of a null, a paragraph is displayed, else an unordered list <ul> is generated with the array elements as the list <li> items. The list items are accordingly put into different classes depending on the elements of the array.

Now, all the possible array elements are known to me, and I want to produce click events for all the possible classes. That made me write the following codes. But it does not seem to work.
_______________________________________________________________________________________________________
<script type="text/javascript">
      function showserviceslist(servicelist) {
            $('#services').remove();
            $('#noservices').remove();

            if( servicelist == null ) {      

                  $(".serviceslist").append("<br><p class=\"noservices\" id=\"noservices\">No Services Registered</p>");
            }
            else {
                              
                  $(".serviceslist").append("<ul class=\"services\" id=\"services\"><a>Services</a></ul>");

                  var count = servicelist.length;

                  var i = 0;

                  for( i=0 ; i<count ; i++ ) {
                        var servicename = servicelist[i];
                        servicename = servicename.replace(/\s/g, '');

                        $(".services").append("<li class=\"btn_" + servicename + "\"><a>" + servicelist[i] + "</a></ul>");
                  }
            }
      }

      $(document).ready(function() {

            $(".btn_ShowVideo").clickfunction(){
                      alert("Hello");
            });
      });
</script>
_______________________________________________________________________________________________________

What do I have to do, to make this work correctly??

Thanks in advance.
ASKER CERTIFIED SOLUTION
Avatar of Julian Hansen
Julian Hansen
Flag of South Africa image

Link to home
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
Start Free Trial
So, there are two ways and which you are doing is not correct.

1. You can use event delegation like this

$(document).ready(function() {
    $(document).on('click', ".btn_ShowVideo", function(){
        alert("Hello");
    });
});

Open in new window


2. You can do this event binding after appending element to the DOM which you are doing inside success callback for that you just need to move the

$(document).ready(function() {
    $(".btn_ShowVideo").on('click', function(){
        alert("Hello");
    });
});

Open in new window


after the for loop.

That it's.
SOLUTION
Link to home
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
Start Free Trial
Avatar of Soumen Roy

ASKER

@Julian Hansen.. .on() worked like a charm.. Thanks a lot.. :)
You are welcome.