使用JavaScript從php加載div

Question

我想在php，javascript中建立可編輯的列表。 我的問題是，我希望在單擊某個項目時在div中加載該項目的更多詳細信息。 沒有額外的細節，我的代碼可以正常工作。 但是我無法得到額外的東西。我的代碼是：product.class

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>';
    }

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>'
    );*/

});

如何在我的productDetails.php中獲得“ currentProduct”？ 我試過$ _POST ['id']，但是什么也沒得到。

Answer 1

試試這個：

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

---

在我看來， .load()是默認情況下是異步的ajax調用，因此container嘗試從php append一些數據，但此時請求未完成且未附加任何內容。

解：

如我所見，您可以使用上述代碼中建議的.load()方法的回調函數來完成此操作。

---

邊注：

您正在使用一種綁定click事件的方法，這種情況是live並且從1.9+開始的最新jQuery庫中已將其刪除，因此請確保您的版本低於1.9或更高，以升級該庫並將推薦的方法用於它使用.on()委托事件，事件委托語法與.on()幾乎沒有什么不同：

$(staticParent).on(event, selector, callback);

其中staticParent是在准備dom時可用的最接近的靜態父級。