Question

我有一个编辑过程的功能。当用户编辑该值并单击该按钮时，它将保存到数据库。但是目前，当我点击按钮时，我收到了错误

ReferenceError：未定义更改

以下是我的代码。谁能告诉我哪里出错了并帮我解决了？

的JavaScript

$(document).ready(function () {
    $('td.edit').click(function (e) {
        var $target = $(e.target);
        if ($target.is('#editbox')) {
            return;
        }
        $('.ajax').html($('.ajax input').val());
        $('.ajax').removeClass('ajax');
        $(this).addClass('ajax');
        $(this).html('<input id="editbox"  size="5" type="text" value="' + $(this).text() + '">');
        $('#editbox').select();
    });

    $('td.edit').ready(function () {
        function change() {
            arr = $(this).attr('class').split(" ");
            if (event.which == 13) {

                $.ajax({
                    type: "POST",
                    url: "clientnetworkpricelist/update.php",
                    data: "value=" + $('.ajax input').val() + "&rowid=" + arr[2] + "&field=" + arr[1],
                    success: function (data) {
                        $('.ajax').html($('.ajax input').val());
                        $('.ajax').removeClass('ajax');
                    }
                });
            }

        }

    });
    $('#editbox').live('blur', function () {

        $('.ajax').html($('.ajax input').val());
        $('.ajax').removeClass('ajax');
    });
});

HTML

<td><img onclick="change()"  src="/image/Picture1.png" style="margin:0 0 0 6px;;cursor:pointer" ></td>

Answer 1

首先，您有$('td.edit').ready(function ()，其中您的html为<td><img...。没有edit类。其次，也许你应该试试这个：

HTML：

<td class="edit"><img src="/image/Picture1.png" style="margin:0 0 0 6px;;cursor:pointer"></td>

JavaScript的：

$(document).ready(function() {
    $('td.edit').on('click', function() {
        //your magic from change() function
    });
});

jQuery 1.7也弃用了live()函数。您应该使用on()代替。

编辑：

如果您只想onClick调用操作，那么为什么要尝试抓住enter按？请务必添加到<td>按钮为edit类的位置。

改变这个：

$('td.edit').ready(function () {
    function change() {
        arr = $(this).attr('class').split(" ");
        if (event.which == 13) {

            $.ajax({
                type: "POST",
                url: "clientnetworkpricelist/update.php",
                data: "value=" + $('.ajax input').val() + "&rowid=" + arr[2] + "&field=" + arr[1],
                success: function (data) {
                    $('.ajax').html($('.ajax input').val());
                    $('.ajax').removeClass('ajax');
                }
            });
        }

    }

});

对此：

$('td.edit img').on('click', function() {
    arr = $(this).attr('class').split(" "); //it will be clicked <img>
    $.ajax({
        type: "POST",
        url: "clientnetworkpricelist/update.php",
        data: "value=" + $('.ajax input').val() + "&rowid=" + arr[2] + "&field=" + arr[1],
        success: function (data) {
            $('.ajax').html($('.ajax input').val());
            $('.ajax').removeClass('ajax');
        }
    });
});

编辑：

就个人而言，我会做这样的事情：

HTML：

<td class="edit"><a href="#" data-id="1" data-field="somefield"><img src="exp.jpg" /></a></td>

JavaScript的：

$('td.edit a').on('click', function(e) {
    e.preventDefault();
    $.ajax({
        type: "POST",
        url: "clientnetworkpricelist/update.php",
        data: "value=" + $('.ajax input').val() + "&rowid=" + $(this).attr('data-id') + "&field=" + $(this).attr('data-field'),
        success: function (data) {
            $('.ajax').html($('.ajax input').val());
            $('.ajax').removeClass('ajax');
        }
    });
});

Answer 2

而不是

$('td.edit').ready(function () {

     //change function definition

});

您可以将函数绑定到其自身的click事件

$('td.edit').click(function () {
        arr = $(this).attr('class').split(" ");
        if (event.which == 13) {

            $.ajax({
                type: "POST",
                url: "clientnetworkpricelist/update.php",
                data: "value=" + $('.ajax input').val() + "&rowid=" + arr[2] + "&field=" + arr[1],
                success: function (data) {
                    $('.ajax').html($('.ajax input').val());
                    $('.ajax').removeClass('ajax');
                }
            });
        }

});

并从html中删除onclick="change()"代码

ReferenceError：未定义更改

2 个答案: