Question

我有一个像这样的jQuery按钮：http://codepen.io/rlkelly/pen/GZgVQr我有一个带有图标的框。如果你点击它，我希望盒子改变，但我希望里面的图标打开一个模态。现在图标不会覆盖框的jQuery，有没有办法做到这一点？

html是：

<button class="box" id="box" type="submit" name="response" value="Accept" style="width: 49%;">
    <div id="yes-notes" class="icon-wrapper pull-right"><i class="fa fa-pencil custom-icon"><span class="fix-editor">&nbsp;</span></i></div>
    <p class="text" id="caption">
        Yes
    </p>
</button>

jQuery是：

$("#box").click(function() {
      $("#box").attr('class', "box2");
      $("#box2").attr('class', "gray");
      $("#caption").attr('class', 'text2');
      $("#caption2").attr('class', 'text');
});

如果你点击<i>，我只想制作一个覆盖#box jQuery的函数。

Answer 1

以下是使用jQuery的方法。

基本上，您需要做的是在单击图标后阻止事件传播。这是通过在事件处理程序中返回false来完成的，这意味着也不会触发按钮的事件处理程序。

$(".box").on("click", ".custom-icon", function() {
  $("#trace").append("<p>Icon clicked</p>");
  return false;
});

$(".box").on("click", function() {
  $("#trace").append("<p>Button clicked</p>");
});

.custom-icon {
  background-color: yellow;
  padding: 10px;
}

<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css" rel="stylesheet" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<button class="box" id="box" type="submit" name="response" value="Accept" style="width: 49%;">
  <div id="yes-notes" class="icon-wrapper pull-right"><i class="fa fa-pencil custom-icon"><span class="fix-editor">&nbsp;</span></i>
  </div>
  <p class="text" id="caption">
    Yes
  </p>
</button>
<div id="trace"></div>

使按钮中的图标具有不同的效果

1 个答案: