On :在伪元素之前，输入[type=“按钮”]单击无效

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的一部分，因此不能将任何事件直接绑定到它们，只能绑定到它们的父元素，就像您已经绑定的那样。但是，当单击伪元素时，事件不会冒泡到父元素。尝试将图标添加为背景图像。

你可以试试这样的方法：

​

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

不要使用伪元素“前面”并使值输入如下所示

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