Javascript Jqgrid自定义格式化程序按钮单击不工作

我创建了一个网格，其中一列的每一行都有一个自定义按钮。单击按钮时，不会调用我的单击事件

我的jqgrid：

$('#QuoteLineTable').jqGrid({
        url: $('#url').val(),
        datatype: 'json',
        type: 'POST',
        postData: { Id: $("#Id").val() },
        colNames: ['Id', 'Quote Number', 'Valid Until Date','View Line Item'],
        colModel: [
            { name: "QuoteLineId", index: "QuoteLineId", hidden: false, hidedlg: true },
            { name: 'QuoteNumber', index: "QuoteNumber" },
            { name: 'ValidUntil', formatter: "date", formatoptions: { newformat: "d/m/Y" }, width: '100px' },
            { name: 'View Line Item', formatter: viewLineBtn }

        ],
        multiselect: true,
        emptyrecords: "No Quote Line to view",
        gridview: true,
        autoencode: true,
        loadtext: "Loading...",
        loadonce: true,
        rowNum: 3,
        rowList: [10, 20, 30],
        pager: '#LinePager',
        height: '100%',
        caption: "Quote List",
        autowidth: true,
        sortname: 'QuoteNumber',
        ajaxGridOptions: { type: 'POST', contentType: "application/json; charset=utf-8" },
        jsonReader: {
            repeatitems: false,
            root: "rows",
            page: "page",
            total: "totalPages",
            records: "totalRecords",
            id: "QuoteLineId"
        },
        serializeGridData: function(postData) {
            return JSON.stringify(postData);
        },
        onCellSelect: function(rowid,e) {

                alert("rowid=" + rowid );

        },

        ondblClickRow: function(rowid) {

            var $model = $('#LineItemMyModal');

            $.ajax({
                type: "GET",
                url: $('#urlItemDetails').val(),
                data: { LineId: rowid },
                success: function(r) {
                    $model.html(r);
                    $model.modal('show');
                }
            });


        }
    }).navGrid('#QuoteLinePager', { edit: false, add: false, del: false, search: true });


    function viewLineBtn(cellvalue, options, rowObject) {
        return "<button class=\"viewLineItem\">View Line Item</button>"
    };


$('.viewLineItem').click(function (rowId) {
   alert("hi");
    alert(rowId);
});

$（'QuoteLineTable'）.jqGrid({
url:$（'#url'）.val（），
数据类型：“json”，
键入：“POST”，
postData:{Id:$（“#Id”）.val（）}，
colNames:['Id'，'Quote Number'，'Valid-to-Date'，'View-Line-Item']，
colModel：[
{name:“QuoteLineId”，index:“QuoteLineId”，hidden:false，hiddedlg:true}，
{name:'QuoteNumber'，索引：“QuoteNumber”}，
{name:'ValidUntil'，格式化程序：“date”，格式化选项：{newformat:“d/m/Y”}，宽度：'100px'}，
{name:'查看行项目'，格式设置程序：viewLineBtn}
],
多选：对，
emptyrecords:“没有要查看的报价行”，
gridview：没错，
自动编码：正确，
loadtext:“正在加载…”，
有一次：是的，
rowNum:3，
行列表：[10,20,30]，
寻呼机：“#LinePager”，
高度：“100%”，
标题：“报价单”，
自动宽度：正确，
sortname:'QuoteNumber'，
ajaxGridOptions:{type:'POST'，contentType:'application/json；charset=utf-8}，
jsonReader：{
重复项：false，
根：“行”，
第页：“第页”，
总计：“总计页数”，
记录：“totalRecords”，
id:“QuoteLineId”
},
serializeGridData:函数（postData）{
返回JSON.stringify（postData）；
},
onCellSelect：函数（rowid，e）{
警报（“rowid=“+rowid”）；
},
ondblClickRow:函数（rowid）{
var$model=$（“#LineItemMyModal”）；
$.ajax({
键入：“获取”，
url:$（'#urlItemDetails'）.val（），
数据：{LineId:rowid}，
成功：功能（r）{
$model.html（r）；
$model.modal（'show'）；
}
});
}
}).navGrid（“#QuoteLinePager”，{edit:false，add:false，del:false，search:true}）；
函数viewLineBtn（单元格值、选项、行对象）{
返回“查看行项目”
};
$（'.viewLineItem'）。单击（函数（rowId）{
警报（“hi”）；
警报（rowId）；
});

基本上，我不知道如何调用button class=viewLineItem的click事件

---

我尝试使用onCellSelect或beforeSelectRow事件，但我还需要使用ondblClickRow来填充模式。因此，我正在寻找不使用oncellSelect的其他选项。

尝试类似的方法

    $('#QuoteLineTable').jqGrid({
            url: $('#url').val(),
            datatype: 'json',
            type: 'POST',
            postData: { Id: $("#Id").val() },
            colNames: ['Id', 'Quote Number', 'Valid Until Date','View Line Item'],
            colModel: [
                { name: "QuoteLineId", index: "QuoteLineId", hidden: false, hidedlg: true },
                { name: 'QuoteNumber', index: "QuoteNumber" },
                { name: 'ValidUntil', formatter: "date", formatoptions: { newformat: "d/m/Y" }, width: '100px' },
                { name: 'View Line Item', formatter: viewLineBtn }

            ],
            multiselect: true,
            emptyrecords: "No Quote Line to view",
            gridview: true,
            autoencode: true,
            loadtext: "Loading...",
            loadonce: true,
            rowNum: 3,
            rowList: [10, 20, 30],
            pager: '#LinePager',
            height: '100%',
            caption: "Quote List",
            autowidth: true,
            sortname: 'QuoteNumber',
            ajaxGridOptions: { type: 'POST', contentType: "application/json; charset=utf-8" },
            jsonReader: {
                repeatitems: false,
                root: "rows",
                page: "page",
                total: "totalPages",
                records: "totalRecords",
                id: "QuoteLineId"
            },
            serializeGridData: function(postData) {
                return JSON.stringify(postData);
            },
            onCellSelect: function(rowid,e) {

                    alert("rowid=" + rowid );

            },

            ondblClickRow: function(rowid) {

                var $model = $('#LineItemMyModal');

                $.ajax({
                    type: "GET",
                    url: $('#urlItemDetails').val(),
                    data: { LineId: rowid },
                    success: function(r) {
                        $model.html(r);
                        $model.modal('show');
                    }
                });


            }
        }).navGrid('#QuoteLinePager', { edit: false, add: false, del: false, search: true });


        function viewLineBtn(cellvalue, options, rowObject) {
            var rowid= options.rowid;
            var button = "<button class=\"viewLineItem\" id="+ rowid+">View Line   Item</button>"
         $('#' + rowid).die();
         $('#' + rowid).live('click', function (rowId) {
            alert("hi");
            alert(rowId);
         });
       };

$（'QuoteLineTable'）.jqGrid({
url:$（'#url'）.val（），
数据类型：“json”，
键入：“POST”，
postData:{Id:$（“#Id”）.val（）}，
colNames:['Id'，'Quote Number'，'Valid-to-Date'，'View-Line-Item']，
colModel：[
{name:“QuoteLineId”，index:“QuoteLineId”，hidden:false，hiddedlg:true}，
{name:'QuoteNumber'，索引：“QuoteNumber”}，
{name:'ValidUntil'，格式化程序：“date”，格式化选项：{newformat:“d/m/Y”}，宽度：'100px'}，
{name:'查看行项目'，格式设置程序：viewLineBtn}
],
多选：对，
emptyrecords:“没有要查看的报价行”，
gridview：没错，
自动编码：正确，
loadtext:“正在加载…”，
有一次：是的，
rowNum:3，
行列表：[10,20,30]，
寻呼机：“#LinePager”，
高度：“100%”，
标题：“报价单”，
自动宽度：正确，
sortname:'QuoteNumber'，
ajaxGridOptions:{type:'POST'，contentType:'application/json；charset=utf-8}，
jsonReader：{
重复项：false，
根：“行”，
第页：“第页”，
总计：“总计页数”，
记录：“totalRecords”，
id:“QuoteLineId”
},
serializeGridData:函数（postData）{
返回JSON.stringify（postData）；
},
onCellSelect：函数（rowid，e）{
警报（“rowid=“+rowid”）；
},
ondblClickRow:函数（rowid）{
var$model=$（“#LineItemMyModal”）；
$.ajax({
键入：“获取”，
url:$（'#urlItemDetails'）.val（），
数据：{LineId:rowid}，
成功：功能（r）{
$model.html（r）；
$model.modal（'show'）；
}
});
}
}).navGrid（“#QuoteLinePager”，{edit:false，add:false，del:false，search:true}）；
函数viewLineBtn（单元格值、选项、行对象）{
var rowid=options.rowid；
var button=“查看行项目”
$（'#'+rowid）.die（）；
$（'#'+rowid）.live（'click'，函数（rowid）{
警报（“hi”）；
警报（rowId）；
});
};

这对我很有用：

 $('#QuoteLineTable').jqGrid({
    ....
    colModel: [
        ...
        { name: 'View Line Item', formatter: viewLineBtn }
    ]
    loadComplete: function (data) {
        console.log(data); // You can view the object
        let rowDataArray = data.rows;
        for (let i = 0, j = rowDataArray.length; i < j; i++)
        {
            let temp = rowDataArray[i];
            $("#btn_" + temp.id).click(() => {
                 m_alert(temp.content);
            });
        }
    }
    });

    function viewLineBtn(cellvalue, options, rowObject) 
    {
        return "<button id='btn_" + rowObject.id + "'>View Line Item</button>"
    }

$（'QuoteLineTable'）.jqGrid({
....
colModel：[
...
{name:'查看行项目'，格式设置程序：viewLineBtn}
]
loadComplete：函数（数据）{
console.log（data）；//您可以查看对象
让rowDataArray=data.rows；
for（设i=0，j=rowDataArray.length；i{
m_警报（临时内容）；
});
}
}
});
函数viewLineBtn（单元格值、选项、行对象）
{
返回“查看行项目”
}

您能详细说明一下吗？