JQuery克隆元素-有解無憂

我被困在這個問題上。我正在撰寫一個任務平臺應用程式。每當我嘗試保存時，任務都會自我克隆。每次“保存更改”后，克隆都會越來越多。我已經重寫了很多次代碼。但是，我仍然沒有成功。請幫我找出錯誤。

$("#taskSave").click(() => {
    const task = {
        id: Date.now(),
        imageUrl: $("#imageInput").val(),
        title: $("#titleInput").val(),
        description: $("#descriptionInput").val(),
        type: $("#typeInput").val(),
    }; 

    $("#overlay").hide();
    todos.push(task);
    saveStorage(todos);

    // reset input values
    $("#imageInput").val("");
    $("#titleInput").val("");
    $("#descriptionInput").val("");
    $("#typeInput").val("");
});

function saveStorage(todos) {
    localStorage.setItem("todos", JSON.stringify(todos));
    display(todos);
};

function display(todos) {
    $("#taskBoard").innerHTML = "";
    // .html("");

    todos.forEach(item => {
        let c = document.createElement("div");
        c.setAttribute("class", "card");
        c.setAttribute('id', item.id);
        c.innerHTML = `
            <div >
                <div >
                    <div ></div>
                </div>
            </div>
            <img src="${item.imageUrl}" alt="JQuery 克隆元素">
            <h2>${item.title}<h2>
            <p>${item.description}</p>
            <div >${item.type}</div>
        `;

        $("#taskBoard").append(c);
        // end 
    });
};

JQuery 克隆元素

uj5u.com熱心網友回復：

我創建了一個最小的作業示例，問題在于 HTML 的清理。你不能innerHTML在 JQuery 物件上使用，或者你使用它的html函式或者你需要用$("#taskBoard")[0].

    // You can use:

    $("#taskBoard").html("");
    // or 
    // document.getElementById("taskBoard").innerHTML  = "";
    // or 
    // $("#taskBoard")[0].innerHTML = "";

    // But not:
    // $("#taskBoard").innerHTML = "";

JSFiddle 上的作業示例（在 SO dont work localStorage 上）

let todos = [];
$("#taskSave").click(() => {
    const task = {
        id: Date.now()
    }; 
    todos.push(task);
        saveStorage(todos);
});

function saveStorage(todos) {
    localStorage.setItem("todos", JSON.stringify(todos));
    display(todos);
        console.log(todos);
};

function display(todos) {
    $("#taskBoard").html("");
    // or 
    // document.getElementById("taskBoard").innerHTML  = "";
    // or 
    // $("#taskBoard")[0].innerHTML = "";
    // But not
    // $("#taskBoard").innerHTML = "";
    

    todos.forEach(item => {
        let c = document.createElement("div");
        c.innerHTML = `
            <p>${item.id}</p>
        `;

        $("#taskBoard").append(c);
    });
};

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<button id="taskSave">
SAVE
</button>

<div id="taskBoard">

</div>

轉載請註明出處，本文鏈接：https://www.uj5u.com/qiye/363792.html

標籤：javascript 查询按钮克隆

上一篇：為什么使用jQuery函式的按鈕沒有用類隱藏我的div：.red、.yellow-當我點擊它時？

下一篇：Ajax不起作用，而是啟動默認方法和操作