Question

在我的项目中，我需要创建一个html5 CMS，我的问题是如何在重叠元素中定位元素？像

<div id='L1'>
  <!--some text -->
  <div id='L2'>
    <!--some text -->
    <div id='L3'>
         <!--some text -->
    </div>
    <div id='L4'>
         <!--some text -->
    </div>
  </div>
</div>

我想针对L1，L2，L3和L4。现在问题来到我可以使用$（L1，L1 *）来定位L1中的每个元素，包括L1并为它们绑定“click”事件处理程序。

然而，当我点击时，让我们说L4，那么不仅L4的内容出来，而且还有L1和L2。我想看到包含那个元素，不需要是父母，我该怎么办？

更新：我通过ajax加载一个temple容器，并为它们绑定事件处理程序

$('#load_area').load(file,function(){
$('#load_area *').click(
    function(){
        $('#edit_area').append($(this).html());//display what I have clicked
    }
);
});

Answer 1

你的代码以这种方式运行的原因是你的事件正在冒泡DOM，为了防止这种行为你可以做以下其中一种

$('#load_area').load(file,function(){
$('#load_area *').click(
    function(event){
        event.stopPropagation();
        $('#edit_area').append($(this).html());//display what I have clicked
    }
);
});

或

$('#load_area').load(file,function(){
$('#load_area *').click(
    function(){
        $('#edit_area').append($(this).html());//display what I have clicked
        return false; //event.stopPrpagation() + event.preventDefault()
    }
);
});

重叠元素中的目标元素

1 个答案: