在标签中换行时会触发后面的Click事件

Question

我在后面的元素上遇到了点击事件的问题.我有一个输入与另一个元素重置它.该元素绝对位于输入之前.

当我在reset元素中单击时,输入有一个我想要阻止的单击事件.当两个元素都不在LABEL标记中时,这可以正常工作:

$(document).on('click', '.popup_selector', function(e){
	alert('Input cliked, if clicked in X it is an error');
});

$('i').click(function(e){
	$('input').val(''); // clear the input
});

i {
  position: absolute;
  right: 0.5em;
  top: 0.1em;
  width: 1em;
  cursor: pointer;
}

i:after {
  content: 'disable-click';
  visibility: hidden;
  overflow: hidden;
}

input {
  padding-right: 2em;
}

div {
  position: relative;
  display: inline-block;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div>
  <i class='clear'>X</i>
  <input type="text" class="popup_selector" />
</div>

当两个元素都由LABEL标记包装时,会出现问题.当我单击reset元素时,会触发输入单击事件,这是一个问题:

$(document).on('click', '.popup_selector', function(e){
	alert('Input cliked, if clicked in X it is an error');
});

$('i').click(function(e){
	$('input').val(''); // clear the input
});

i {
  position: absolute;
  right: 0.5em;
  top: 0.1em;
  width: 1em;
  cursor: pointer;
}

i:after {
  content: 'disable-click';
  visibility: hidden;
  overflow: hidden;
}

input {
  padding-right: 2em;
}

div {
  position: relative;
  display: inline-block;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<label>
  <div>
    <i class='clear'>X</i>
    <input type="text" class="popup_selector" />
  </div>
</label>

有谁知道如何解决它？

非常感谢你.

测试铬51.

Answer 1

试试这个它会起作用

$('i').click(function(e){
    e.preventDefault();
    $('input').val(''); // clear the input
  });