jQuery 嵌套的 .parent() 方法不适用于动态元素，即使使用 .delegate()

Question

这是我的 HTML：

<div id="lessons_append_to">
    <div id="lesson_container">
        <div>
        ...
        <div id="delete_conatiner">
        <a href="javascript:void(0);" class="delete">Delete</a>
        </div>
        </div>
    </div>
    <div id="lesson_container">
        Same as first one
    </div>
    <div id="lesson_container">
        Same as first one
    </div>
</div>

所有lesson_container都是动态生成的。

这是我的 JavaScript：

jQuery(document).delegate('.delete', 'click', function(){
    if (!confirm("Do you really want to delete the lesson?")){
     return false;
    } else {
     var select = jQuery(this).parent().parent().parent(); //It works and gets a #lesson_container
     console.log(select); //Returns selected object
     var selected = jQuery(this).parent().parent().parent().parent();//This doesn't work and #lesson_append_to can't be selected
     console.log(selected); //Returns undefined
    }
 });

你能帮我一个线索吗？或者告诉我我在这里做错了什么。

Answer 1

由于您使用的是JQuery，我建议使用.closest() 函数

你的 JavaScript 应该是这样的：

jQuery(document).on('click', '.delete', function(){
    if (!confirm("Do you really want to delete the lesson?")){
     return false;
    } else {
     var select = jQuery(this).closest( "#lesson_container" ); 
     console.log(select); 
     var selected = jQuery(this).closest( "#lesson_append_to" );
     console.log(selected);
    }
 });