CODEWITHSUNDEEP
javascriptjqueryhtml
sunil shahi
sunil shahi

Reputation: 3

$(document).on('click' is not working in chrome

Here is the simple code which I am trying on js fiddle:

<select id="test">
  <option value="">select</option>
  <option class="pid">1</option>
  <option class="pid">2</option>
  <option class="pid">3</option>
  <option class="pid">4</option>
</select>

$(function () {
    $(document).on('click', '.pid', function () {
       alert('here');
    });
});

Click on http://jsfiddle.net/QRVSw/16/

Upvotes: 0

Views: 494

Answers (2)

GolezTrol
GolezTrol

Reputation: 116100

The click event applies to the whole select element, not to the individual options. Also it's better to use the change event which triggers after making a selection, in contrast to the click event, which triggers as soon as you click.

In addition, you don't need to wrap your code to prepare it for OnReady. With this on call, you bind the event to the document, which is already available, even if the select object itself isn't yet.

So, your code could be simplified (and made working) like this:

$(document).on('change', '#test', function () {
   alert('here');
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select id="test">
  <option value="">select</option>
  <option>1</option>
  <option>2</option>
  <option>3</option>
  <option>4</option>
</select>

Upvotes: 3

Christos
Christos

Reputation: 53958

You could try to make use of the onchange event for select elements:

$(function () {
    $(document).on('change', '#test', function () {
       alert('here');
    });
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select id="test">
  <option value="">select</option>
  <option class="pid">1</option>
  <option class="pid">2</option>
  <option class="pid">3</option>
  <option class="pid">4</option>
</select>

Upvotes: 0

Related Questions