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