javascript - 使用 jquery 在点击事件中查找表单

Question

$(function() {
$('.offer-wrapper').click(function (e) {
        if ($(e.target).hasClass('form')) {
            return // do something here if there is a form
        }
    });
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script>
<div class="offer-wrapper">

  <div class="offer-image-wrapper offer-col1">
    test
  </div>

  <div class="offer-text offer-col2">
    <ul>
      <li>test</li>
      <li>test</li>
    </ul>
  </div>

  <div class="offer-button offer-col3">
    <a href="test">test </a>
  </div>

  <div class="modal fade" id="ascent-form-modal" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
    <div class="modal-dialog">
      <div class="modal-content">
        <div class="modal-body">
          <button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">×</span><span class="sr-only">Close</span></button>
          <form>
            <input placeholder="test" type="text">
          </form>
          <div class="clear"></div>
        </div>
      </div>
    </div>
  </div>

</div>

我的目标是查明我单击的容器是否有表单。我的问题是我不知道如何使用通用遍历方法来完成单击容器上的任意位置并搜索表单。

Answer 1

您可以使用find()搜索被单击元素的子元素:

$('.offer-wrapper').on('click',function () {
        if ($(this).find('form').length > 0 ) {
            console.log('here');
        }
    });

这是一个 fiddle 演示:https://jsfiddle.net/zephyr_hex/6xf2z9xq/2/