未定义onclick调用的方法

Question

I have the code running on jsfiddle . The code is below. I can bet a ton of money this is me doing something stupid, but I can't find it.

Clicking on says that Uncaught ReferenceError: showDetail is not defined

I have tried varying adding of parameters as well just to try and troubleshoot. Passing none, one, two doesn't effect the error message.

const lcAppdata = {

    matters: [{
        mid: 100,
        title: "Matter1",
        dateOpened: "01/01/17",
        decedent: "Elvis Presley",
        personalRepresentative: "Alexis Texas",
        attorneyAccountInfo: "John Holmes"
    }, {
        mid: 200,
        title: "Matter2",
        dateOpened: "01/02/16",
        decedent: "Kurt Cobain",
        personalRepresentative: "Kagney Linn Karter",
        attorneyAccountInfo: "Simon Rex"
    }, {
        mid: 300,
        title: "Matter3",
        dateOpened: "01/03/15",
        decedent: "Bob Marley",
        personalRepresentative: "Nikki Benz",
        attorneyAccountInfo: "Ron Jeremy"
    }],
    currentMatter: ''
};


function showDetail(mid){
    console.log(mid);
};

function init(){
    for(let matter of lcAppdata.matters){
    $('#tbodyMatterList').append(`<tr 
            onclick="showDetail(${matter.mid})"> 
            <th scope="row" >${matter.title}</th>
            <td bind>${matter.decedent}</td>
            <td bind>${matter.dateOpened}</td>
            <td bind>${matter.personalRepresentative}</td>
            <td bind>${matter.attorneyAccountInfo}</td></tr>`);

    }


};

init();

Answer 1

You code is fine, it's because of how jsfiddle runs your script. It's set to run the script onLoad ie all your code is actually run inside the callback of load event so your function showDetail is not actually defined as a global function, but only local to the load event callback

You can either change your code to attach the showDetail function to the window object to make it global like this

function showDetail() {
  console.log($(this).attr('data-mid'));
};

window.showDetail = showDetail;

or change jsfiddle settings to run your script globally like this

Answer 2

You can do it in the following way

function showDetail() {
  console.log($(this).attr('data-mid'));
};


(function init() {
    for (let matter of lcAppdata.matters) {
        $('#tbodyMatterList').append(`<tr data-mid=${matter.mid}><th scope="row" >${matter.title}</th>
        <td bind>${matter.decedent}</td>
        <td bind>${matter.dateOpened}</td>
        <td bind>${matter.personalRepresentative}</td>
        <td bind>${matter.attorneyAccountInfo}</td></tr>`);
    }

    $('#tbodyMatterList tr').click(showDetail);
})();

In JSFiddle you have to init methods in a different way the way you want to achieve it