Multiple Click function on Javascript

Question

I am new to javascript and i m using this script :

<script type="text/javascript">
$(document).ready
(function()
 {
     $('#apply').click(function()
     {
         $('#applyinfo').toggle("slow");
     });
 });
</script>

for the on click function when i click on apply it as to display the apply info div. this function is working however if i create multiple apply id it is not working. Please help me on this.

**`id`** should be unique, you should use **`class`** instead — Pranav C Balan, Aug 22 '15 at 05:49

score 1 · Answer 1 · edited Aug 22 '15 at 05:58

If you wish to bind the click function for multiple dom elements you can use it as,

 $(document).ready(function() {
    $('#apply,#apply1,#apply2').click(function() {
      $('#applyinfo').toggle("slow");
    });
  });

with , delimiter. However you cant name the same id's for various html elements. In that case go for a class selector as @Pranav suggested in comments

For ex,

  $('.applyClass').click(function() { .. } );

score 1 · Answer 2 · edited Aug 22 '15 at 05:59

1

id should be unique , so use common class to all those items

<script type="text/javascript">
  $(document).ready(function() {
    $('.apply').click(function() {
    //-^-- class selector
      $('#applyinfo').toggle("slow");
    });
  });
</script>

edited Aug 22 '15 at 05:59

Pranav C Balan

113,687
23
165
188

answered Aug 22 '15 at 05:52

anoop m m

315
3
11

score 0 · Answer 3 · answered Aug 22 '15 at 05:55

0

Try this solution:

$(document).ready(function() {
    $("[id$='apply']").click(function() {
      $('#applyinfo').toggle("slow");
    });
  });

answered Aug 22 '15 at 05:55

Rajan Goswami

769
1
5
17

score 0 · Answer 4 · answered Aug 22 '15 at 05:59

An id should be unique, so having multiple #apply and #applyinfo isn't a option. Instead, switch to classes.

The function depends on your HTML though.

If .applyinfo is a child of .apply this works:

HTML:

<div class="apply">Click here
  <div class="applyinfo">Toggle this info</div>
</div>

jQuery:

$(function() {
  $('.apply').click(function() {
    $(this).find('.applyinfo').toggle("slow");
  });
});

DEMO

$(function() {
  $('.apply').click(function() {
    $(this).find('.applyinfo').toggle("slow");
  });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="apply">Click here
  <div class="applyinfo">Toggle this info</div>
</div>

<div class="apply">Click here
  <div class="applyinfo">Toggle this info</div>
</div>

<div class="apply">Click here
  <div class="applyinfo">Toggle this info</div>
</div>

If the .applyinfo is not a child of .apply we need to find the matching div. The function then becomes:

HTML:

<a class="apply-1">Click</a>
<a class="apply-2">Click</a>
<a class="apply-3">Click</a>

<div class="applyinfo-1">Belongs to a.apply-1</div>
<div class="applyinfo-2">Belongs to a.apply-2</div>
<div class="applyinfo-3">Belongs to a.apply-3</div>

jQuery:

$(function() {
  $('[class^=apply-]').click(function() {
    var nr = $(this).attr('class').split("-").pop() ,
        selector = '.applyinfo-'+nr;
    $(selector).toggle("slow");
  });
});

DEMO

$(function() {
  $('[class^=apply-]').click(function() {
    var nr = $(this).attr('class').split("-").pop() ,
        selector = '.applyinfo-'+nr;
    $(selector).toggle("slow");
  });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<a class="apply-1">Click</a>
<a class="apply-2">Click</a>
<a class="apply-3">Click</a>

<div class="applyinfo-1">Belongs to a.apply-1</div>
<div class="applyinfo-2">Belongs to a.apply-2</div>
<div class="applyinfo-3">Belongs to a.apply-3</div>

Multiple Click function on Javascript

4 Answers4