On：在伪元素之前，输入[type =＆＃34; button＆＃34;] click不起作用

Question

当我在input type="button"上添加使用伪元素::before将其包裹在span中的图标时，button的点击时无法点击图标

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

＆＃13;

＆＃13;

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

＆＃13;

.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;
}

＆＃13;

<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>

＆＃13;

＆＃13;

＆＃13;

Answer 1

伪元素根本不是DOM的一部分，所以你不能直接将任何事件绑定到它们，你只能绑定到它们的父元素。单击伪元素时，事件不会冒泡到父元素。尝试将图标添加为背景图像

您可以尝试这样的事情：

         $(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>

Answer 2

不使用伪元素＆＃34;之前＆＃34;并输入值来输入这样的东西

<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" value="i">
</span>
</div>