如何在 CSS 选择器上应用 jQuery：之前 [重复]答案

【问题标题】：How to apply jQuery on css selector :before [duplicate]如何在 CSS 选择器上应用 jQuery：之前 [重复]
【发布时间】：2016-08-12 09:55:06
【问题描述】：

这是我的场景，用CSS 创建了一个div，并在右上角添加了一个X，在pseudo-class 之前。如何在javascript 的帮助下单击 X 来关闭此 div？

CSS

.validation-summary-errors{
    position: absolute;
    width: 260px;
    padding: 20px;
    box-sizing: border-box;
    top: 50%;
    left: 50%;
    background-color: #fff;
    text-align: center;
    font-size: 14px;
    -webkit-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
    border-radius: 4px;
    border: #000 solid 1px;
    box-shadow: #232323 1px 1px 6px;
}

.validation-summary-errors:before {
    display: block;
    content: "X";
    position: absolute;
    right: -15px;
    top: -15px;
    background-color: rgba(0, 0, 0, 0.85);
    padding: 5px;
    border-radius: 50%;
    font-size: 16px;
    color: #fff;
    width: 29px;
    box-sizing: border-box;
}

视图中的 HTML（编辑）

 <div class="message-error">  

                            @validationSummary

                    </div>

【问题讨论】：

伪类不是 DOM 的一部分，所以你不能添加事件监听器。
:before 是伪元素，在 DOM 中无法访问！
@AlexChar 您可以提出的任何其他解决方案
见this。
有一个span 或div 具有这些风格并使用它的click 事件。

标签： javascript jquery html css asp.net-mvc

【解决方案1】：

:before 是一个伪元素，不能在 DOM 中访问。而是使用具有这些样式的 span 或 div 并使用它的 click 事件。

注意：只需确保您为 span.close 定义了 CSS :-)

解决方案 1：如果您可以编辑 HTML。

$(function() {
  $('.close').click(function() {
    $(this).parent().hide();
  });
});

.validation-summary-errors {
  position: absolute;
  width: 260px;
  padding: 20px;
  box-sizing: border-box;
  top: 50%;
  left: 50%;
  background-color: #fff;
  text-align: center;
  font-size: 14px;
  -webkit-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
  border-radius: 4px;
  border: #000 solid 1px;
  box-shadow: #232323 1px 1px 6px;
}
span.close {
  cursor: pointer;
  display: block;
  content: "X";
  position: absolute;
  right: -15px;
  top: -15px;
  background-color: rgba(0, 0, 0, 0.85);
  padding: 5px;
  border-radius: 50%;
  font-size: 16px;
  color: #fff;
  width: 29px;
  box-sizing: border-box;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div class="validation-summary-errors">
  This specified email already exists
  <span class="close">X</span>
</div>

解决方案2：如果HTML是动态创建的。

$(function() {
  $('.validation-summary-errors').append('<span class="close">X</span>');

  $('.validation-summary-errors').on('click', 'span.close', function() {
    $(this).parent().hide();
  });
});

.validation-summary-errors {
  position: absolute;
  width: 260px;
  padding: 20px;
  box-sizing: border-box;
  top: 50%;
  left: 50%;
  background-color: #fff;
  text-align: center;
  font-size: 14px;
  -webkit-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
  border-radius: 4px;
  border: #000 solid 1px;
  box-shadow: #232323 1px 1px 6px;
}
span {
  cursor: pointer;
  display: block;
  content: "X";
  position: absolute;
  right: -15px;
  top: -15px;
  background-color: rgba(0, 0, 0, 0.85);
  padding: 5px;
  border-radius: 50%;
  font-size: 16px;
  color: #fff;
  width: 29px;
  box-sizing: border-box;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div class="validation-summary-errors">
  This specified email already exists
</div>

【讨论】：

一个工作示例是其他 cmets/answers 中缺少的内容。 +1
我的div validation-summary-errors是动态创建的，如何插入span
@QadeerMangrio ：检查更新的答案！

【解决方案2】：

您可以使用pointer-events css 属性来忽略对父元素的点击，而不是对伪元素的点击。这样你就可以在父节点上设置一个点击监听器，它只会被伪元素触发。

当然，如果您出于其他原因需要在父级上允许指针事件，这将是一个问题。

fiddle

【讨论】：

你可能已经足够好了，缺点是你不能再将任何鼠标事件绑定到这个元素，顺便说一句会带来一些其他问题，因为例如点击会通过它。所以用户可以点击他没有看到/期望的东西。但是对于这个问题，将元素包装在一个捕获鼠标事件的容器中可以解决它，仍然在猜测。

【解决方案3】：

伪元素不在 DOM 中。借助 getComputedStyle 方法，您可以阅读它，但不能对其进行操作。

而不是创建一个绝对定位的 div，其中包含与链接到的 before 类的 X OR。将您的侦听器设置为该 div。

【讨论】：