find form in click event with 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>

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.

ive tried using the find() function but im unsuccessful with it.... — windy boy
– windy boy, Commented Feb 1, 2018 at 23:16

devlin carnate · Accepted Answer · 2018-02-01 23:17:32Z

2

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/

edited Feb 1, 2018 at 23:17

answered Feb 1, 2018 at 23:09

devlin carnate

8,6617 gold badges55 silver badges106 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

showdev Over a year ago

I think you will need to test the length of the returned collection. find() returns "truthy" regardless of whether the element is found in the DOM.

windy boy Over a year ago

tested your code & ive duplicated the html container without the form and still` console logs` here even without a form element

Collectives™ on Stack Overflow

find form in click event with jquery

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related