Jquery는 새 목록 항목에 요소를 추가합니다.

Question

'동물 목록'에 '메뉴'항목을 추가하고 '편집 버튼'을 클릭하여 목록 항목에 '삭제 버튼'을 추가하려고했습니다. 문제는 삭제 버튼은 추가 된 새 항목이 아니라 지정된 목록 항목에만 추가된다는 것입니다. 현재 코드를 여기에 표시 할 수 있습니다. http://jsfiddle.net/7DP9L/9/

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

JS가

$(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(); 
    });  



}); 

Answer 1

왜 리와 삭제 버튼을 추가하지?

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