Question

我目前正在研究jquery .clone（）。我的应用程序的用户可以根据需要克隆和删除任意数量的容器。我使用jquery .live（）方法删除容器，但我的代码不再工作了。在做了一些Stackoverflow搜索之后，我发现.live（）已被弃用。以下是我的代码的摘录。

HTML

<div id="wrapper">
    <div id="container1">
       Title:<input type="text" name="person.title" id="title">
       <input type="hidden" name="person.title" value="title"> 
       <div id="delete_title"></div>        
    </div>
    <div id="container2">
       Title:<input type="text" name="person2.title" id="title2">
       <input type="hidden" name="person2.title" value="title" id="title2"> 
       <div id="delete_title2"><p id="del_field"><a href="#"><span>Delete Title</span></a></p>             </div>        
   </div>
   <div id="container3">
       Title:<input type="text" name="person3.title" id="title3">
       <input type="hidden" name="person3.title" value="title" id="title3"> 
       <div id="delete_title3"><p id="del_field"><a href="#"><span>Delete Title</span></a></p></div>        
   </div>
</div>

JQUERY

$('p#del_field').live('click', function() {
   $(this).parents('div').remove();
   return false;
});

以上代码适用于JQUERY 1.7。我一直在尝试实现.on（）但我最终删除了所有包含而不是选中的。这是我的.qu（）的jquery

$('#wrapper').on('click','p#rdel_field', function () {
   $(this).parents('div').remove();
  return false;
 });

如何实现.on（）只删除选定的容器？先感谢您。任何建议都会有所帮助。

Answer 1

我会将您的P标签切换为使用类，您在附件中的选择器不正确，因为您无法在元素之间共享ID。

http://jsfiddle.net/adamfullen/f8nhE/

HTML

<div id="wrapper">
    <div id="container1">
       Title:<input type="text" name="person.title" id="title">
       <input type="hidden" name="person.title" value="title"> 
       <div id="delete_title"></div>        
    </div>
    <div id="container2">
       Title:<input type="text" name="person2.title" id="title2">
       <input type="hidden" name="person2.title" value="title" id="title2"> 
       <div id="delete_title2"><p class="del_field"><a href="#"><span>Delete Title</span></a></p>             </div>        
   </div>
   <div id="container3">
       Title:<input type="text" name="person3.title" id="title3">
       <input type="hidden" name="person3.title" value="title" id="title3"> 
       <div id="delete_title3"><p class="del_field"><a href="#"><span>Delete Title</span></a></p></div>        
   </div>
</div>

JS

$(function(){
    $('#wrapper').on('click','.del_field', function () {
        $(this).parent('div').remove();
        return false;
    })
 });

实现jquery而不是live

1 个答案: