Question

如何仅在我单击的元素的子元素（按其类确定）上激活click事件？

我尝试这样做，但是似乎激活了页面上.a-collaps-button的所有onclick事件（我有多个.collaps-button和多个.a-collaps-button）

<button class="collaps-button">
  <a href="#adminModal" class="a-collaps-button" data-toggle="modal" onclick="showModalContentjs('modificy')">Modificy</a>
</button>

$('.collaps-button').click(function () {
  $(this).children('.a-collaps-button').click();
});

对于CSS我做到了，而且有效

$(function () {
  $('.collaps-button').hover(function () {
    $(this).children('.a-collaps-button').css('color', '#f44242');
    $(this).children('.a-collaps-button').css('text-decoration', 'none');
  }, function () {
    $(this).children('.a-collaps-button').css('color', 'white');
    $(this).children('.a-collaps-button').css('text-decoration', 'none');
  });
});

Answer 1

您的主要问题是您的HTML无效。您不能嵌套可点击元素，即。您不能在a内放置button元素。

要解决此问题，请删除a元素，只需将您在点击a时执行的任何逻辑附加到button的click事件中即可。另请注意，您不应使用过时的on*事件属性。使用不引人注目的事件处理程序，例如addEventListener()或jQuery的on()或事件快捷方式，例如click()。

还请注意，您不应使用JS来修改UI。您的hover逻辑更适合CSS。试试这个：

$('.collaps-button').click(function() {
  showModalContentjs('modificy');
});

function showModalContentjs(foo) {
  console.log(foo);
}

.collaps-button {
  color: white;
  text-decoration: none
}
.collaps-button:hover {
  color: #f44242;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button class="collaps-button">Modificy</button>

仅选择元素的子级，由其类标识

1 个答案: