在onClick中调用javascript函数

Question

当我部署代码时，它给了我一个错误：saveRows不是一个函数那么怎么了？

 dataGrid.prototype = { display: function() { var self = this; var html = []; var check = 0; var lastSelection; html.push("<div style='margin-left:20px'>"); html.push("<input class='btn btn-default' type='button' value='Save All Rows' onclick='saveRows()'' />"); html.push("<table id='" + this.id + "" + "'class='table'>\\n</table>"); html.push("<div id='pagger_" + this.id + "'></div>"); html.push("</div>"); $('body').append(html.join("")); $("#" + this.id).jqGrid({ // ... }); }, // ... saveRows: function() { var ids = $("#" + this.id).jqGrid('getDataIDs'); for (var i = 0; i < ids.length; i++) { $("#" + this.id).jqGrid('saveRow', ids[i]); } } }; 

还有其他建议吗？

Answer 1

你可以改变

<input class='btn btn-default' type='button' value='Save All Rows'
       onclick='saveRows()'' />

至

<input id='mysave' class='btn btn-default' type='button' value='Save All Rows'/>

并使用

$("#mysave").click(function () {
    // any code executed on click on the button
});

Answer 2

saveRows函数是dataGrid原型的一部分。 因此，它没有被定义为全局函数-并且不能被定义为纯HTML中的onclick处理程序。

您可以通过使用jQuery（而不是HTML字符串）创建DOM元素来解决问题，并直接绑定onclick回调。 例如（未测试）：

$(body).append(
    $('<div/>').style('margin-left', '20px').append(
        $('<button/>', {
            'class': 'btn btn-default',
            'text': 'Save All Rows'
        }).on('click', function () {
            self.saveRows();
        }),
        $('<table/>', {
            'id': self.id,
            'class': 'table'
        }),
        $('<div/>', {
            'id': 'pager_' + self.id
        })
    )
);

Answer 3

改变这个：

html.push("<input class='btn btn-default' type='button' value='Save All Rows' onclick='saveRows()'' />");

实际上是一个对象：

var theInput = $("<input class='btn btn-default' type='button' value='Save All Rows'>");
    $(document).on("click", theInput, function(){self.saveRows()});

然后，将其添加到html数组中。

html.push($(theInput)[0].outerHTML);

https://jsfiddle.net/atg5m6ym/3524/

Answer 4

你可以试试这个

$('body').on('click','#yourButtonId',function(){  
    saveRows(); 
});