使用javascript从php加载div

我想用php和javascript构建一个可编辑列表。我的问题是，当点击一个项目时，我想在一个div中加载该项目的更多细节。没有额外细节，我的代码工作正常。但是我没有多余的。。我的代码是： 产品类别

public function __toString(){

        // The string we return is outputted by the echo statement

        return '
        <li id="product-'.$this->data['productId'].'" class="product">

            <div class="text">'.$this->data['productName'].'</div>
            <div id="productDetails"></div>
            <div class="actions">
                <a href="#" class="edit" id="editProduct">Edit</a>
                <a href="#" class="delete">Delete</a>
            </div>                  
        </li>';
    }

公共函数{
//我们返回的字符串由echo语句输出
返回'

“.$this->data['productName']”
'；
}

product.js

    // Listening for a click on a edit button

$('.product a.edit').live('click',function(){

    var container = currentProduct.find('.text');

    if(!currentProduct.data('origText'))
    {
        // Saving the current value of the Category so we can
        // restore it later if the user discards the changes:

        currentProduct.data('origText',container.text());
    }
    else
    {
        // This will block the edit button if the edit box is already open:
        return false;
    }

    $('<input type="text">').val(container.text()).appendTo(container.empty());
    /*This is my main problem*/
    container.append($("#productDetails").load("productDetails.php", {id: currentProduct}));


     /*  
    // Appending the save and cancel links:  (This works fine)
    container.append(
        '<div class="editCategory">'+
            '<a class="saveChanges" href="#">Save</a> or <a class="discardChanges" href="#">Cancel</a>'+
        '</div>'
    );*/

});

//正在侦听对编辑按钮的单击
$（'.product a.edit'）.live（'单击'，函数（））{
var container=currentProduct.find（'.text'）；
如果（！currentProduct.data（'origText'））
{
//保存类别的当前值，以便
//如果用户放弃更改，请稍后恢复：
currentProduct.data（'origText'，container.text（））；
}
其他的
{
//如果编辑框已打开，这将阻止编辑按钮：
返回false；
}
$（''）.val（container.text（））.appendTo（container.empty（））；
/*这是我的主要问题*/
container.append（$（“#productDetails”）.load（“productDetails.php，{id:currentProduct}”）；
/*  
//附加保存和取消链接：（这很好）
container.append(
''+
“或者”+
''
);*/
});

如何在productDetails.php中获取“currentProduct”？我尝试了$\u POST['id']，但什么也没有得到。

试试这个：

$("#productDetails").load("productDetails.php", {id: currentProduct}, function(response, status, xhr){
    container.append(response);
});

---

在我看来，

.load（）

是一个ajax调用，默认情况下是异步的，因此

container

尝试

append

一些来自php的数据，但此时请求没有完成，也没有追加任何内容

解决方案： 正如我看到的，您可以使用

.load（）

方法的回调函数来实现这一点，正如上面代码中所建议的那样

---

旁注： 您正在使用一种方法绑定

单击
事件，您的案例是
live
，并且从
1.9+
开始，它已在最新的jQuery库中被删除，因此请确保您的版本低于
1.9
或更好，以升级库，并使用建议的方法
.on（）
委派事件，事件委派语法与
.on（）
几乎没有什么不同：

其中，
staticParent
是dom就绪时可用的最接近的静态父级。
明智的做法是：1）检查php文件在直接从浏览器请求时是否生成正确的输出（不带ajax）2）执行
print\r（$\u POST）在你的php文件中，并将结果发布在这里，3）定义“nothing”（比如void或null，但计算机科学中不存在nothing）你使用的是什么版本的jQuery
.live（）
已从jQuery中删除，这可能会导致错误。live（）可在其他文件中工作。我有正确的版本@giorgio在案例1）中效果很好..我得到了正确的结果，在案例2）中我一无所获。我尝试了你建议的代码，但仍然一无所获。我试试.on（），我会告诉你的
$(staticParent).on(event, selector, callback);