javascript - 在 :before pseudo element, 输入 [type ="button"] 点击不起作用

Question

当我在 input type="button" 上添加一个图标时，使用伪元素 ::before 将其包装在 span 中，点击图标时按钮无法正常工作。

我可以使用什么解决方案来进一步推进？下面是代码:

$(document).ready(function() {
  $('.btn').click(function() {
    alert('alert');
  });
});

.um-searchwp .f_left {
  margin-right: 10px;
  margin-bottom: 10px;
}
.f_left {
  float: left;
}
.um-searchbtn.text-search {
  width: 30px;
  position: relative;
  height: 30px;
}
.um-autosearchtext input.text {
  padding: 6px 29px 6px 5px;
  width: 192px;
  border: 1px solid #fd6800;
  color: #61381b;
  background-color: #fff;
  border-radius: 5px;
  font-size: 15px;
}
.um-searchbtn input[type='button'] {
  width: 30px;
  height: 30px;
  position: absolute;
  right: 0px;
  background: #fd6800;
  border: 1px solid #fd6800;
  border-top-right-radius: 5px;
  border-bottom-right-radius: 5px;
  cursor: pointer;
}
.text-search::before {
  content: "i";
  position: absolute;
  width: 12px;
  height: 12px;
  background: url(../images/imageSprite.png) -237px -1084px;
  right: 8px;
  margin-top: -6px;
  z-index: 999;
  top: 15px;
  cursor: pointer;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="f_left um-autosearchtext">
  <span class="um-searchbtn text-search">
 <input type="text" class="text f_left mr0 mb0" id="textboxSearchUser">
<input type="button" class = "btn" class="mr0 mb0">
</span>
</div>

Answer 1

伪元素根本不是 DOM 的一部分，因此您不能将任何事件直接绑定(bind)到它们，您只能绑定(bind)到它们的父元素，就像您所做的那样。当伪元素被点击时，事件不会冒泡到父元素。尝试将图标添加为背景图像

你可以尝试这样的事情:

         $(document).ready(function() {
           $('.btn').click(function() {
             alert('alert');
           });
         });

p .f_left {
  margin-right: 10px;
  margin-bottom: 10px;
}
.f_left {
  float: left;
}
.um-searchbtn.text-search {
  width: 30px;
  position: relative;
  height: 30px;
}
.um-autosearchtext input.text {
  padding: 6px 29px 6px 5px;
  width: 192px;
  border: 1px solid #fd6800;
  color: #61381b;
  background-color: #fff;
  border-radius: 5px;
  font-size: 15px;
}
.um-searchbtn input[type='button'] {
  width: 30px;
  height: 30px;
  position: absolute;
  right: 0px;
  background: #fd6800;
  border: 1px solid #fd6800;
  border-top-right-radius: 5px;
  border-bottom-right-radius: 5px;
  cursor: pointer;
}
.text-search {
  padding-right: 12px;
  position: absolute;
  width: 12px;
  height: 12px;
  background: url(../images/imageSprite.png) -237px -1084px;
  right: 8px;
  z-index: 999;
  cursor: pointer;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="f_left um-autosearchtext">
  <span class="um-searchbtn text-search">
     <input type="text" class="text f_left mr0 mb0" id="textboxSearchUser">
    <input type="button" class = "btn" class="mr0 mb0">
    </span>
</div>