Call a javascript function inside a dynamic row Jquery

Question

Good day guys. I am trying to implement onclick function in a dynamically created table in jQuery. But each time I click the button, I get this error

(Unexpected token ILLEGAL)

in my console.

But when I click on the error, there's no code on the line it's pointing to.

Here is the code :

 $(document).ready(function(){
    var tbl="";
    $.getJSON('./libs/form.php',function(result){
        console.log(result);
       $.each(result,function(key,val) {
        if($.isNumeric(key)){
            var mail=val.Email;
            tbl+="<tr class='odd gradeX'> ";
            tbl+="<td>" + val.Name + "</td>";
            tbl+="<td>"+ val.Email +"</td>";
            tbl+="<td>"+ val.Gender +"</td>";
            tbl+="<td>" + val.Qualification + "</td>";
            tbl+="<td>" + val.Experience + "</td>";
            tbl+="<td>" + val.Note + "</td>";
            tbl+="<td><a  onclick='javascript:call(" + mail +");' class='btn btn-success btn-small'><i class='icon-edit icon-white'></i>" +  "EDIT"   + "</a></td>"

        tbl+="</tr>";

        }


        });
       $("#applicantstbl").append(tbl);

        $("#applicantstbl").dataTable({
            "bJQueryUI":true,
            "sPaginationType":"full_numbers"

        });

    }); 

});

Please I'd like to know what am I doing wrong, it displays the table perfectly. Just the onclick function.

Here is the function am trying to call :

 <script>
   function call(name)
   {
     alert("Called"+ name);
   }
</script>

Your code should have no onClick or similar events if you are writing good jQuery. See the answer by @Rohan below for how to do it better... — vogomatix
– vogomatix, Commented May 12, 2014 at 10:02
all callback run at runtime so any static thing will not be there , so store the mail data in html dom along with html and at runtime get the email data and pass to method. — Pushker Yadav
– Pushker Yadav, Commented May 12, 2014 at 10:07

user2587132 · Accepted Answer · 2014-05-12 10:00:08Z

1

Try changing

".....onclick='javascript:call(" + mail +");'...."

to

".....onclick='javascript:call(\"" + mail +"\");'....."

answered May 12, 2014 at 10:00

user2587132

Sign up to request clarification or add additional context in comments.

1 Comment

graphicdivine Over a year ago

Also, you could simply use: "onclick='call(..." The "javascript:" prefix is redundant.

Rohan Kumar · Accepted Answer · 2014-05-12 10:01:17Z

0

Try it like,

$('#applicantstbl').on('click','.mail-link',function(e){
    e.preventDefault();
    call($(this).data('email'));
});

Add a class mail-link to your html link like,

tbl+="<td><a data-email='"+mail+"' class='mail-link btn btn-success btn-small'><i class='icon-edit icon-white'></i>" +  "EDIT"   + "</a></td>"

answered May 12, 2014 at 10:01

Rohan Kumar

40.7k11 gold badges81 silver badges111 bronze badges

1 Comment

olakunle Over a year ago

Thanks, but am trying to call the function on the HTML page,so you can edit or delete the particular user.@rps answer solved the problem. But thanks

LNT · Accepted Answer · 2014-05-12 10:09:14Z

0

change name of function call to something else may callFun.

<a  onclick='javascript:callFun(\"" + mail +"\");'>mail</a>

or alternate is

<a  emailId='" + mail +"'>mail</a>

$('#applicantstbl').on('click','.btn-small',function(e){
    e.preventDefault();
    callFun($(this).attr('emailId'));
});

answered May 12, 2014 at 10:09

LNT

9268 silver badges19 bronze badges

Collectives™ on Stack Overflow

Call a javascript function inside a dynamic row Jquery

3 Answers 3

1 Comment

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

1 Comment

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related