Question

我是 mvc 和 jquery 的新手，

我用jquery创建了一个表，我在每行添加一个按钮。我需要在按钮上点击一个函数调用参数。

我的代码如下所示

function loadData(data) {

            var tab = $('<table class="myTable"></table>');
            var thead = $('<thead></thead>');
            thead.append('<th>Id</th><th></th>');
            thead.append('<th>Username</th>');

            tab.append(thead);
            $.each(data, function (i, val) {

                var trow = $('<tr></tr>');
                trow.append('<td>' + val.empID + '</td>');
                trow.append('<td>' +"" + '</td>');
                trow.append('<td>' + val.empName + '</td>');

 trow.append('<td><input type="button" value="Edit" onclick="Details(" ' + val.empID + ');" /></td>');


                tab.append(trow);
            });
            $("tr:odd", tab).css('background-color', '#C4C4C4');
            $("#AllEmployees").html(tab);

        };

我的功能是：

        function Details(k) {

            alert("Failed! Please try again.");

        };

这两个函数都在document.ready方法中。

但是函数调用无效。

Answer 1

你有额外的报价：

trow.append('<td><input type="button" value="Edit" onclick="Details(" ' + val.empID + ');" /></td>');
                                                                    ^

如果您的值val.empID是数字，请尝试此操作：

trow.append('<td><input type="button" value="Edit" onclick="Details(' + val.empID + ');" /></td>')

如果是一个字符串，那么使用\来逃避单引号：

trow.append('<td><input type="button" value="Edit" onclick="Details(\'' + val.empID + '\');" /></td>')

Answer 2

将文件放在文档外面。否则，无法从外部文档准备好访问它。（您的输入将在dom ready函数之外呈现）

Answer 3

将详细信息功能放在文档外面。

function Details(k) {
     alert("Failed! Please try again.");
    }

如果要使用客户端方法进行验证，请使用此选项。从你的方法中返回true / false。

trow.append('<td><input type="button" value="Edit" onclick="return Details(' + val.empID + ');"

Answer 4

试试这个

     function loadData(data) {
        var tab = $('<table class="myTable"></table>');
        var thead = $('<thead></thead>');
        thead.append('<th>Id</th><th></th>');
        thead.append('<th>Username</th>');

        tab.append(thead);
        $.each(data, function (i, val) {
            var trow = $('<tr></tr>');
            trow.append('<td>' + val.empID + '</td>');
            trow.append('<td>' +"" + '</td>');
            trow.append('<td>' + val.empName + '</td>');
            var tabledata='<td><input type="button" value="Edit"/></td>'
            tabledata.attr("empID",val.empID);
            tabledata.click(Details)
            trow.append(tabledata);
            tab.append(trow);
        });
        $("tr:odd", tab).css('background-color', '#C4C4C4');
        $("#AllEmployees").html(tab);

    };

    function Details() {

        alert("Failed! Please try again."+this.attr("empID"));

    };

Answer 5

为什么不创建像：

这样的输入

<input class="edit_button" type="button" value="Edit" />

然后在你的document.ready

中

$('.edit_button').on('click', function(event){
    event.preventDefault();
    alert("Failed! Please try again.");
});

无法在按钮单击时调用Jquery功能

5 个答案: