Question

$('#vehicle_area').on('click', '.vehicle_select' ,function(e){
      $(e.target).toggleClass('selected').siblings().removeClass('selected');
  });

.selected{
background-color: #ff0000;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id='vehicle_area'>

  <div class='vehicle_select' id='vehicle_select_1'>
    <h3>Vehicle 1</h3>
    <p>this is a test</p>
    <hr>
  </div>
  <div class='vehicle_select' id='vehicle_select_2'>
    <h3>Vehicle 1</h3>
    <p>this is a test</p>
    <hr>
  </div>
  <div class='vehicle_select' id='vehicle_select_3'>
    <h3>Vehicle 1</h3>
    <p>this is a test</p>
    <hr>
  </div>

</div>

我正在尝试向静态div中动态生成的元素添加类。我已经将jquery事件绑定到静态div的id并使用了.on（），这样，只要单击类“ .vehicle_select”中的元素，即使该元素是在页面加载后创建的，它都将触发。

但是，这意味着$（this）选择器引用静态div，而不引用被单击的元素。

我尝试使用下面的代码，但是正如预期的那样，这会将类添加到静态元素#vehicle_area中，而不是添加到单击的元素中。

如何选择单击的动态元素，而不是事件绑定到的静态元素？

div中有多个带有“ .vehicle_select”类的元素，因此我只想选择单击即可触发事件的元素。

更新：请参见代码段。使用event.target效果更好，但是它会选择容器中被单击的任何元素，而不仅仅是具有.vehicle_select类的元素。因此，例如，现在分别选择标题和段落。

Answer 1

$(this)有效。 e.target无法正常工作，因为那可能是任何事情。您需要在任何孩子的外部点击

$('#vehicle_area').on('click', '.vehicle_select' ,function(e){
    console.log(e.target.tagName); // can be anything
    $(this).toggleClass('selected').siblings().removeClass('selected');
});

$('#vehicle_area').html(`<div class='vehicle_select' id='vehicle_select_1'>
    <h3>Vehicle 1</h3>
    <p>this is a test</p>
    <hr>
  </div>
  <div class='vehicle_select' id='vehicle_select_2'>
    <h3>Vehicle 1</h3>
    <p>this is a test</p>
    <hr>
  </div>
  <div class='vehicle_select' id='vehicle_select_3'>
    <h3>Vehicle 1</h3>
    <p>this is a test</p>
    <hr>
  </div>
`)

.selected { background-color:red }

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id='vehicle_area'>


</div>

选择动态内部元素，而不是静态容器

1 个答案: