追加正在複製內容

我想將內容追加到我的代碼中。當我按下一個按鈕時，我的jQuery再次執行，並再次追加。所以我的問題是，有沒有辦法確保代碼只執行一次？或者如果有一種方法只能追加一次？追加正在複製內容

$(document).ready(function() { 
    var uspar = '<div id="usparDiv"><img src="https://example.com"><ul><li>list 1</li><li>list 2</li><li>list 3</li></ul></div>'; 
    $('.extend-guarantee').append(uspar); 
}); 



<form class="extend-guarantee"> 
    <span class="checkbox"> 
    <input type="checkbox"> 
    <span class="opt-name">Testing checkbox</span> 
    <span class="icon-click"></span> 
    </span>

來源

2017-08-09 A88amanda

這將有助於也看到您的HTML和按鈕點擊處理程序 –

沒有跡象表明內容是附加在點擊事件？這段代碼最初運行（只是一次）？無論如何，我們需要更多的上下文 – Endless

JQuery在頁面加載時只執行一次。可能你已經在你的HTML中包含了這個腳本兩次，或者像這樣。 – euvl

如果我正確理解你的問題，你可以嘗試這樣的事情。

在下面的代碼中，創建一個名爲appendToDom的函數。你可以在點擊一個按鈕時調用它，並將一個帶有usparDiv標識的div以及它的所有內容（如函數中定義的）附加到DOM（在這種情況下，內容將附加到主元素，如appendToDom ）。

appendToDom函數還可以檢查以確保僅添加一次內容（通過檢查是否存在id爲usparDiv的div）。如果有，它返回並結束執行。如果沒有，它會將div附加到DOM。

https://jsfiddle.net/eulloa/2a3ee3te/

$(document).ready(function() { 
    $('button').on('click', appendToDom) 
}); 

function appendToDom() { 
    if ($('#usparDiv').length) 
    return; 

    var uspar = '<div id="usparDiv"><img src="https://example.com"><ul><li>list 1</li><li>list 2</li><li>list 3</li></ul></div>'; 
    $('main').append(uspar); 
}

您當前的jQuery代碼將只執行一次，是因爲當DOM是準備去（的document.ready）它的定義。這樣，當按鈕被點擊時，你的追加邏輯將工作，而不僅僅是當DOM準備好時。

來源

2017-08-09 07:38:19 eulloa

追加正在複製內容

回答

相關問題