Question

我在jsfiddle上运行了代码。代码如下。我可以赌一大笔钱，这是我做一些愚蠢的事，但我找不到。

点击显示未捕获的ReferenceError：showDetail未定义

我尝试过不同的参数添加尝试和排除故障。传递无，一，二不会影响错误信息。

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

您的代码很好，因为jsfiddle如何运行您的脚本。它设置为运行脚本onLoad，即您的所有代码实际上都在load事件的回调中运行，因此您的函数showDetail实际上并未定义为全局函数，但是仅在本地加载事件回调

您可以更改代码，将showDetail函数附加到window对象，使其像这样全局

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

window.showDetail = showDetail;

或更改jsfiddle设置以像这样全局运行脚本

Answer 2

您可以通过以下方式执行此操作

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);
})();

在JSFiddle中，你必须以与实现它的方式不同的方式初始化方法

onclick调用方法未定义

2 个答案: