CODEWITHSUNDEEP
javascriptjqueryhtml
windy boy
windy boy

Reputation: 13

find form in click event with jquery

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

My goal is to find out if the container I am clicking has a form or not. My problem is I do not know how to make generic traversing methods to accomplish clicking anywhere on the container and searching for the form.

Upvotes: 0

Views: 122

Answers (1)

devlin carnate
devlin carnate

Reputation: 8591

You can use find() to search the child elements of the element that is clicked:

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

Here is a Fiddle Demo: https://jsfiddle.net/zephyr_hex/6xf2z9xq/2/

Upvotes: 2

Related Questions