使用JQuery動態插入和刪除HTML標記的正確方法

我不是Web專家，但我需要使用JQuery的良好實踐方面的幫助。使用JQuery動態插入和刪除HTML標記的正確方法

我的問題： 我有一個項目的大表。每個項目都有一個按鈕可將其添加到頁面的其他部分，因此我需要提取內容並將其設置爲新元素。

我寫了this code on JSFiddle，但我不確定這是解決這個問題的正確方法（但它的工作原理）。

其他選項我記住的是要有一個id與我想要複製和處理文本以獲取值的行的編號。 $（ '名字 - ' + id）的。這應該如下：

<tr id='row-1'> 
    <td id='name-1' class='name'>First</td> 
    <td id='lastname-1' class='lastname'>Brand</td> 
    <td> 
     <button id='btnTest-1' class='btnTest'>Add</button> 
    </td> 
</tr>

感謝您的意見或建議！

來源

2013-10-25 Ricardo A Corredor

您可以添加每個項目無數次。這是意圖嗎？ – PlantTheIdea

是的，可以多次添加它們 –

從不使用增量id或class屬性。它變成了維護噩夢。

你可以提高你使用closest()和find()，而不是分別鏈parent()和children()調用了代碼。另外，您可以使用委託事件來動態添加按鈕。試試這個：

$(document).ready(function() { 
    $('.btnTest').click(function (e) { 
     e.preventDefault(); 
     var $tr = $(this).closest('tr'); 
     var name = $tr.find('.name').text(); 
     var lastname = $tr.find('.lastname').text(); 
     $('#names').append('<div><span>' + name + ' ' + lastname + '</span><button class="delName">Delete name</button></div>'); 
    }); 

    $('#names').on('click', '.delName', function (e) { 
     e.preventDefault(); 
     $(this).closest('div').remove(); 
    }); 
});

Example fiddle

來源

2013-10-25 15:19:25

感謝您的完整和快速的回答！ –

@RicardoACorredor沒問題，很高興幫助 –

您的代碼運行正常，但我推薦幾個優化：

$(document).ready(function() { 
    $('.btnTest').on('click',function (e) { 
     e.preventDefault(); 
     var $parent = $(this).parent(), 
      name = $parent.prevAll('.name').text(), 
      lastname = $parent.prev().text(), 
      obj = $('#names').append('<div><span>' + name + ' ' + lastname + '</span><button class="delName">Delete name</button></div>'); 

     obj.find('.delName').on('click',function (e) { 
      e.preventDefault(); 
      $(this).parent().remove(); 
     }); 
    }); 
});

這個版本可以更好地利用緩存，避免了.parent()和.children()雙重申報，因爲.prev()和.find()方法會更快。它還將變量聲明合併到單個語句中，這將使您的縮小代碼更小。

Here is an updated jsFiddle.

編輯

你也應該使用.text()，而是如果.html()，修改我的答案。

來源

2013-10-25 15:23:30 PlantTheIdea

感謝您的更正和細節！一個「優化」問題：即使它們是大型部分，也很常見嗎？製作一個隱藏段的克隆，然後用正確的數據填充它更實際嗎？ –

其可維護性比速度更多。如果你克隆了一個巨大的部分，然後在那裏修改100個元素，它將會永遠消耗殆盡，而不是僅僅追加新的數據。它總是一個平衡，所以我可以說最好的是測試兩種方法，並看看哪個更適合你。 – PlantTheIdea

好的，再次感謝！ –

改變您單擊處理程序，以便它使用事件代表團和on()方法，因此保持傾聽添加到DOM新元素

obj.on("click", '.delName', function (e) { 
     e.preventDefault(); 
     $(this).parent().remove(); 
});

http://jsfiddle.net/Wk4Ut/2/

你只需要引用obj，並且該活動將聽取.delname上的點擊，並向上級展開。無需使用兒童（）。children（）

來源

2013-10-25 15:23:40

謝謝！我會檢查文檔的on（） –

使用JQuery動態插入和刪除HTML標記的正確方法

回答

相關問題