I have tried to use like this

$(nTd).html("<div class='btn-group'> <button class='btn btn-info btn-sm' onclick='viewskpd('"+oData.id+"')' data-toggle='tooltip' title='Detail SKPD'><i class='fa fa-eye' style='color:white'></i></button>");

But it went like this:

<button class="btn btn-info btn-sm" onclick="viewskpd(" 00cc72988f8240428b25ac5327b2a3c6')'="" data-toggle="tooltip" title="" data-original-title="Detail SKPD"><i class="fa fa-eye" style="color:white"></i></button>

But I am not sure why the onclick function that trigger viewskpd() didnt work.

I have checked the console and it tell me like this.

Uncaught SyntaxError: Invalid or unexpected token

Why is this happen ?

I have tried to use like this

$(nTd).html("<div class='btn-group'> <button class='btn btn-info btn-sm' onclick='viewskpd('"+oData.id+"')' data-toggle='tooltip' title='Detail SKPD'><i class='fa fa-eye' style='color:white'></i></button>");

But it went like this:

<button class="btn btn-info btn-sm" onclick="viewskpd(" 00cc72988f8240428b25ac5327b2a3c6')'="" data-toggle="tooltip" title="" data-original-title="Detail SKPD"><i class="fa fa-eye" style="color:white"></i></button>

But I am not sure why the onclick function that trigger viewskpd() didnt work.

I have checked the console and it tell me like this.

Uncaught SyntaxError: Invalid or unexpected token

Why is this happen ?

• javascript
• html
• onclick
• uncaught-exception

• I think your quotes around +oData.id+ just needs to be single quotes? so ('+oData.id+') – AJDEV Commented May 8, 2018 at 3:59
• it make the javascript variable to be like html @AJDEV – Gagantous Commented May 8, 2018 at 4:02

5 Answers 5

The oData.id needs to be quoted so it's a string that is quoted with different quotes than enclosing the onclick attribute:

onclick='viewskpd(\""+oData.id+"\")'

In full:

$($0).html("<div class='btn-group'> <button class='btn btn-info btn-sm' onclick='viewskpd(\""+oData.id+"\")' data-toggle='tooltip' title='Detail SKPD'><i class='fa fa-eye' style='color:white'></i></button>");

You're entering some pretty wild territory... script injected into markup attributes by scripts which were probably originally inside of markup language itself. Don't do this, it's a nightmare.

Try something like this instead:

<button data-action="viewskpd" data-skpd-id="00cc72988f8240428b25ac5327b2a3c6" ...

In your script...

$(body).on('click', 'button[data-action="viewskpd"]', (e) => {
  console.log(e.target);  // 
});

Untested, but that should get you started. Put your data in the markup, but your script in your script. Keep them separate.

Why don't you assign an ID to <button class='btn btn-info btn-sm' ... and program its click event in JS?

At whereever the location that you are having oData.id, you could do something like follows.

<button id='id1' class='btn btn-info btn-sm' ...

Then use this id1 as the selector and program that element's click event, which would be like,

$(document).on("click", "#id1", function(){
    viewskpd(oData.id); // Call the required function
});

Actually you need a string variable inside viewskpd function. Use toString() function for it, you must write like below:

$(nTd).html("<div class='btn-group'> <button class='btn btn-info btn-sm' onclick='viewskpd("+oData.id.toStirng()+")' data-toggle='tooltip' title='Detail SKPD'><i class='fa fa-eye' style='color:white'></i></button>");

The 00cc72988f8240428b25ac5327b2a3c6 has no meaning for JavaScript until you turn it to string .

Alternatively you may use `. Please note that this is a specific character different from " and '. Then enclose the variable into ${}, it allows better readability:

let ntd = document.getElementById("ntd");
ntd.outerHTML = `<div class='btn-group'> 
                 <button class='btn btn-info btn-sm' 
                 onclick='viewskpd("${oData.id}")'
                 data-toggle='tooltip' title='Detail SKPD'>
                 <i class='fa fa-eye' style='color:white'>
                 </i></button></div>`;