Javascript函数在blur或onclick上不起作用答案

【问题标题】：Javascript function not working onblur or onclickJavascript函数在blur或onclick上不起作用
【发布时间】：2016-07-07 00:25:32
【问题描述】：

我对 ajax 还很陌生，我不确定为什么我的函数没有触发。我有一个使用 MySQL 数据库中的值动态构建的表。我正在尝试使表格能够内联编辑。我要编辑的表格部分构建如下....

<tr class="table-row">
    <td><?php echo $row['idcpu']; ?></td>
    <?php 
    echo "<td contenteditable=\"true\" onBlur=\"saveToDatabase(this,'name','".$row['idcpu']."');\" onClick=\"showEdit(this);\">".$row['name']." </td>";
    echo "<td contenteditable=\"true\" onBlur=\"saveToDatabase(this,'description','".$row['idcpu']."');\" onClick=\"showEdit(this);\">".$row['description']."</td>";
    echo "<td contenteditable=\"true\" onBlur=\"saveToDatabase(this,'price','".$row['idcpu']."');\" onClick=\"showEdit(this);\">".$row['price']."</td>";
    echo "<td contenteditable=\"true\" onBlur=\"saveToDatabase(this,'quantity','".$row['idcpu']."');\" onClick=\"showEdit(this);\">".$row['quantity']."</td>"; ?>
</tr>

Javascript 也是这样.....

<script>
    function saveToDatabase(editableObj,column,id) {
        $(editableObj).css("background","#FFF url(Loading_icon.gif) no-repeat right");
        $.ajax({
            url: "update/cpu.php",
            type: "POST",
            data:'column='+column+'&editval='+editableObj.innerHTML+'&id='+id,
            success: function(data){
                $(editableObj).css("background","#FDFDFD");
            }
       });
    }
</script>

我尝试了许多不同的方式将代码输出到 html，所以我知道这不是问题，但我可能很容易错过我需要的东西，因为我说我还很新。任何帮助将不胜感激

【问题讨论】：

不要使用contenteditable，而是使用textarea 或input。 contenteditable 非常复杂，一点也不友好。 textarea 和 input 是标准的、可靠的，并且有几种跨浏览器的方式来操作它们。
我现在已经开始使用输入，虽然我已经设法让我的 onclick 工作，但我的 onblur 仍然不会触发函数 saveToDatabase。背景没有变化，没有图像加载，PHP页面没有运行
对于表单元素而不是innerHTML，您使用obj.value 用于JS 或$(obj).val() 用于jQuery。而不是 onblur 使用 onchange 。您需要熟悉使用表格的详细信息。这个资源是一个很好的开始：dyn-web.com/tutorials/forms

标签： javascript jquery ajax html-table

【解决方案1】：

您的代码似乎运行良好。你可以看看这里：

JSBin Example

我已经使用 Chrome v49 对其进行了测试。

正如@zer00ne 提到的，您应该尝试使用<input>，方法是将其嵌套在<td> 元素中，并在输入更改时运行ajax 调用。浏览器支持要好得多。

【讨论】：

我已经改变了它，所以我现在使用文本输入而不是 contenteditable。尽管您说它正在工作，但我编辑的字段是可编辑的，但不会保留更改。我引用的 php 文件没有运行，也没有发生 css 更改。我是否希望我的代码做其他事情？我只需要将值发送到 PHP 脚本
我想我忘了提到我的 php 页面运行一个脚本，该脚本将使用输入的信息更新数据库