在 onClick 中调用 javascript 函数答案

【问题标题】：calling a javascript function in onClick在 onClick 中调用 javascript 函数
【发布时间】：2016-04-21 13:27:59
【问题描述】：

当我部署我的代码时，它给了我一个错误： 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]);
        }
      }
    };

还有其他建议吗？？

【问题讨论】：

不应该是onclick='saveRows()'而不是onclick='saveRows()''（有两个'）吗？
试试dataGrid.saveRows()
打字错误对不起..但仍然存在同样的问题
@TimB 还是一样
您只发布了 JavaScript 代码片段，很难理解。您是否有一些在线演示以查看您尝试实现的内容？我建议您对代码进行更多更改以简化其他代码。首先，onclick='saveRows()' 的使用是不好的方式。最好使用beforeSelectRow 来处理在网格的任何单元格上 上的onclick 事件。了解您使用的 jqGrid 版本以及 jqGrid 的哪个分支非常重要。

标签： javascript jquery jqgrid

【解决方案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
});

【讨论】：

【解决方案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
        })
    )
);

【讨论】：

【解决方案3】：

你可以试试这个

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

【讨论】：

【解决方案4】：

改变这个：

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/

【讨论】：