How to apply a function on an element without any event handler after just creating it

Question

I made a dynamic element on javascript. Actually i am retrieving some data from db and on response i made an element in javascript

  $.ajax({
                url: 'php/count_comments.php',
                type: 'post',
                data: {

                },
                success: function(response) {

                    var data = JSON.parse(response);
                       if(data!='') {  

                    $.each(data, function(i, item) {
                            var span3=document.createElement("span");
                             span3.appendChild(document.createTextNode("No Comments"));
                             span3.setAttribute("id",n+newsid);
                             span3.setAttribute("class","ment");
                            p1.appendChild(span3);


                    });

                }else if(data==''){
                    alert("Admin has not uploaded any news yet");
                    return false;
                }

                }
                });

Now when the element has been created and every element has a unique id now i want to run a function without any event handler for each element this is function i want to run

function comments{
    var target = event.target || event.srcElement;
             var ids = target.id;
              var id = ids.slice(-14);

        //      alert(id);
              $.ajax({
                url: 'php/count_comments.php',
                type: 'post',
                data: {
                    id:id
                },
                success: function(response) {

                    var data = JSON.parse(response);
                       if(data!='') {  

                    $.each(data, function(i, item) {
//                         var target = event.target || event.srcElement;
//                            var ids = target.id;
//                        alert(ids);
             //     alert(document.getElementById(ids).innerHTML);
                        document.getElementById(ids).innerHTML=data[i].comments+ " Comment(s)";
                    });

                }else if(data==''){
                    //alert("No comments yet");
                    return false;
                }

                }
                });

}

1- No need to have `else if(data=='')` intead have `else` only. 2- format your code properly. — Bilal Siddiqui, Oct 05 '19 at 11:43
natively you cant detect if a element has a set event handler, with the exception of testing inline html attribute handlers, eg `
` or the equivalent object property. You used to be able to get events registered through jquery https://stackoverflow.com/questions/2518421/jquery-find-events-handlers-registered-with-an-object not sure it still works. You would have to keep track of the elements you registered an event for — Patrick Evans, Oct 05 '19 at 11:52

score 0 · Answer 1 · answered Oct 05 '19 at 11:47

You can call your function immediately in the loop which creates elements.

$.each(data, function(i, item) {
    var span3=document.createElement("span");
    span3.appendChild(document.createTextNode("No Comments"));
    span3.setAttribute("id",n+newsid);
    span3.setAttribute("class","ment");
    p1.appendChild(span3);

    //call from here with the id
    comments(n+newsid)
});

Also, comments function is wrongly declared, correct it and have id as parameter.

function comments(id) {
 // do your stuff
}

if you want to call comment method silently then use a timeout function while calling

setTimeout(function() {
    comments(n+newsid);
}, 0)

How to apply a function on an element without any event handler after just creating it

1 Answers1