jquery將元素添加到新列表項目

-2

我試圖將'menu'項目添加到'動物列表'，然後通過單擊（切換）「編輯按鈕」將「刪除按鈕」附加到列表項目。問題是刪除按鈕只添加到給定的列表項目而不是添加的新項目。當前的代碼可以在這裏顯示。 http://jsfiddle.net/7DP9L/9/jquery將元素添加到新列表項目

HTML

1. Add these items to the list 
<div class="menu">          
    <a href="javascript:void(0)" id="addCat">Add_Cat</a>&nbsp;&nbsp; 
    <a href="javascript:void(0)" id="addDog">Add_Dog</a>&nbsp;&nbsp; 
    <a href="javascript:void(0)" id="addLion">Add_Lion</a>  
</div> 
<br /> 

2. Add/hide delete button from the list 
<div> 
    <a href="javascript:void(0)" id="editBtn">Edit Button</a> 
</div>  

<ul id="animal"> 
    <li><a href="#">Bird</a></li> 
    <li><a href="#">Snake</a></li> 
    <li><a href="#">fish</a></li> 
</ul>

CSS

.delBtn{ 
    display:none; 
}

$(document).ready(function() { 
    var cat = $('<li>Cat</li>'); 
    var dog = $('<li>Dog</li>'); 
    var lion = $('<li>Lion</li>'); 
    var deletebutton = '<input class="delBtn" type="submit" value="delete"/>'; 

    // Step 1. Add items to the list 
    $('#addCat').one("click", function() { 
     $(cat).hide().prependTo('ul#animal').fadeIn("slow"); 
    }); 

    $('#addDog').one("click", function() { 
     $(dog).hide().prependTo('ul#animal').fadeIn("slow"); 
    }); 

    $('#addLion').one("click", function() { 
     $(lion).hide().prependTo('ul#animal').fadeIn("slow"); 
    }); 

    // Step 2. Add/hide delete button from the list items  
    $('ul#animal li').append(deletebutton); 

    $('#editBtn').click(function(){ 
     $('.delBtn').toggle(); 
    });  



});

來源

2014-02-21 user1781367

OK不錯的工作。順便說一句你想做什麼？ –

http://jsfiddle.net/7DP9L/2/在這裏，順便說一句，它的「開」，而不是「一」（如果它不只是小提琴的bug）。並確保你有jQuery庫引用。 – Holybreath

@Holybreath：如果OP只想調用一次處理程序，'.one（）'是正確的。 –

爲什麼不貴麗追加的刪除按鈕？

HTML：

<div class="menu">          
    <a href="javascript:void(0)" data-animal="Cat" class="addAnimal">Add_Cat</a>&nbsp;&nbsp; 
    <a href="javascript:void(0)" data-animal="Dog" class="addAnimal">Add_Dog</a>&nbsp;&nbsp; 
    <a href="javascript:void(0)" data-animal="Lion" class="addAnimal">Add_Lion</a> 
</div>

JS：

$('.addAnimal').one("click", function() { 
    $('<li></li>') 
       .append('<a href="#">'+$(this).data('animal')+'</a>') 
       .append(deletebutton) 
       .hide() 
       .prependTo('ul#animal') 
       .fadeIn("slow"); 
});

我還編輯了一點點你html提出一些更通用。 data-attributes對此非常有幫助。

編輯：你也應該禁用「添加」按鈕，當您在「編輯模式」

FIDDLE

來源

2014-02-21 15:57:58 MamaWalter

這對我很有用。非常感謝！ – user1781367

jquery將元素添加到新列表項目

回答

相關問題