jQuery：无法检索动态创建的 DOM 元素的属性

Question

情况如下：我正在编写一个执行 CRUD 功能的简单 AJAX 应用程序。当用户双击特定元素时，该元素会变为文本框，以便他们可以进行内联编辑。当文本框失去焦点（其代码如下）时，文本框的值将被 POST 到更新数据库的 PHP 脚本。

除了一件事之外，一切都很精彩。当我创建一条新记录时，该记录会通过 AJAX 弹出到列表顶部，如果不刷新页面，我将无法编辑该记录。我的意思是，编辑看起来就像已提交，但是当您刷新时，它会恢复为原始状态。刷新后就没有问题了。

归结为：当我尝试在表中（数据库和页面上）新创建的行上运行以下代码时（在数据库中和页面上），编辑似乎是在页面上创建，但从未进入数据库。

//Make changes on FOCUSOUT
    $('#editable').live('focusout', function(){
        var parentListItem = $(this).parents('li');
        var theText = $(this).val();
        var parentListItemID = parentListItem.parents('ul').attr('id');

        $(this).remove();
        parentListItem.html(theText);
        parentListItem.removeClass('beingEdited');

        $.post("databasefuncs.php?func=edit", { postedMessage: parentListItemID, fullTextContent: theText },
            function(result){
                if(result == 1) {
                    parentListItem.parents('ul').animate({ backgroundColor: 'blue' }, 500).animate({ backgroundColor: '#eeeeee' }, 500);
                } else {
                    alert(result);
                }

            });

    });

Answer 1

我想您没有将事件绑定到通过 AJAX 加载的新 DOM 元素。

Answer 2

你的问题是 post 执行了，但你的目标函数 (func=edit) 永远不会触发，你的 php 永远不会读取你在问号之后发送的参数，你正在发送一个 post 请求并希望它的行为像 get通过将参数附加到 URL，将您的请求更改为：

$.ajax({
 type: "POST",
 url: "databasefuncs.php",
 data: {func: "edit", postedMessage: parentListItemID, fullTextContent: theText},
 success: function(data, textStatus, jqXHR) {
    if(textStatus === "success") {
      parentListItem.parents('ul').animate({ backgroundColor: 'blue' }, 500).animate({ backgroundColor: '#eeeeee' }, 500);
    }
    else {
       alert(textStatus);
    }
 } 
});

现在在您的 PHP 中，您有 $_POST["func"] = "edit";

希望这很清楚并且有帮助。干杯。