jQuery: add click event to specific id

Question

I have a small jquery problem:

My code is like this:

<div id="select-word-5" class="select-word-link"> - some content - </div>
<div id="select-5" class="select"> - some content - </div>

I have throughout my document several select-word-link and select divs.

I want to add a click event to the first div, that reacts just to the second div.

My idea was to loop through all the "select-x" elements, but i think there is a much better way?

$('.select-word-link').each(function()
{

    var id = this.id;
    var idLink = this.id.replace("-word", "");


    $('.select').each(function()
    {

        if (idLink == this.id)
        {


          $(id).click(function() {
            alert("this does not work");

        });

    });


});

1. IDs must be UNIQUE. Use class. 2. Add the event to the nested element and use stopPropagation to not bubble up — mplungjan
– mplungjan, Commented Feb 7, 2016 at 10:39
You want to add a click listener? If so you need to use the on('click', function() {}) syntax. Also you could simply use the next/prev function if your html place both divs next to each other. — Laurent Fauvel
– Laurent Fauvel, Commented Feb 7, 2016 at 10:40
As an addition to my answer, I think there might be a simpler way of solve your problem all together ;-) — Bob van Luijt
– Bob van Luijt, Commented Feb 7, 2016 at 10:42

Bob van Luijt · Accepted Answer · 2016-02-07 11:55:50Z

16

You can do this easier by triggering an action on an event.

$('#select-5').click(function(){
    alert('Does this work?');
});

$('.select-word-link').click(function(){
    $('#select-5').trigger('click'); // will behave as if #select-5 is clicked.
});

Info: http://api.jquery.com/trigger/

More advanced:

$('#select-5').click(function(){
    alert('Does this work?');
});

$('#select-6').click(function(){
    alert('Does this work?');
});

// etc

$('.select-word-link').click(function(){
    var selectId  = this.id.replace('-word', '');
    $('#'+selectId).trigger('click'); // will behave as if #select-5 is clicked.
});

edited Feb 7, 2016 at 11:55

answered Feb 7, 2016 at 10:37

Bob van Luijt

7,67815 gold badges64 silver badges108 bronze badges

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

3 Comments

mangotasche Over a year ago

This already looks really good :)Just a small question: if i use the last code with the "select-word-link", do i still need to make a click event for every "select" or can i use a universal approach too? The JS code for every click event is the same (its just the content between the divs that is different, thats why i need to use ids for the links)

mangotasche Over a year ago

Got it! Just replace the trigger ($(selectId).trigger....) with: ("#"+selectID).XXXX And then my jQuery Code to by executed :)

Bob van Luijt Over a year ago

Awesome, as a tip: you might want to investigate the usage of classes and ids a bit more, often when you need to use something like the replace function there is another way. Happy coding!

morteza hosseini · Accepted Answer · 2016-02-07 10:42:38Z

1

maybe this code help you

    $(".select-word-link").click(function(){
    $(this).next().hide();
});

});

answered Feb 7, 2016 at 10:42

morteza hosseini

274 bronze badges

Comments

Peter Wilson · Accepted Answer · 2016-02-07 10:38:47Z

0

try

$('.select-word-link').first().on('click',function(){
   // you code goes here
})

answered Feb 7, 2016 at 10:38

Peter Wilson

4,3175 gold badges40 silver badges63 bronze badges

1 Comment

Frank Fajardo Over a year ago

Wouldn't this just select the first element with a class select-word-link?

Jalal Mostafa · Accepted Answer · 2016-02-07 10:59:09Z

0

jQuery as CSS uses # selector to identify that this string is an Id. e.g.

<div id="someId"></div>

and you execute this code:

$('#someId')

this will select the DOM object that has the Id someId

while id property returns the id of the DOM object without the selector # i.e. this jQuery code:

var id = $('#someId').get(0).id

will initialize the variable id to 'someId'

Thus, in your code add '#' in the selector

$('#' + id).click(function() {
            alert("this does not work");

        });

answered Feb 7, 2016 at 10:59

Jalal Mostafa

1,03411 silver badges27 bronze badges

Comments

Parth Trivedi · Accepted Answer · 2016-02-07 11:08:47Z

0

You have to trigger click next() element not all .select

$(".word").click(function() {
  var selectId = this.id.replace('-word', '');
  console.log(selectId);
   $('#'+selectId).trigger('click');
});

$(".next").click(function() {
  alert($(this).html());
})

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="select-word-5" class="select-word-link word">- some content 5-</div>
<div id="select-word-6" class="select-word-link word">- some content 6-</div>
<div id="select-word-7" class="select-word-link word">- some content 7-</div>etc.
<div id="select-5" class="select-word-link next">- some content next 5-</div>
<div id="select-6" class="select-word-link next">- some content next 6-</div>
<div id="select-7" class="select-word-link next">- some content next 7-</div>

edited Feb 7, 2016 at 11:08

answered Feb 7, 2016 at 10:49

Parth Trivedi

3,8321 gold badge23 silver badges41 bronze badges

5 Comments

Parth Trivedi Over a year ago

you can find next .select

mangotasche Over a year ago

the problem is, that select is not always the next element. my code looks like this:

<div id="select-word-5" class="select-word-link"> - some content - </div> <div id="select-word-6" class="select-word-link"> - some content - </div> <div id="select-word-7" class="select-word-link"> - some content - </div>  etc.   <div id="select-5" class="select-word-link"> - some content - </div> <div id="select-6" class="select-word-link"> - some content - </div> <div id="select-7" class="select-word-link"> - some content - </div>

Parth Trivedi Over a year ago

As per select-word-link bind click it triggers click multiple times recursively. You can do that by adding two class word and next to element and you can trigger specific click.

Parth Trivedi Over a year ago

Do console.log(selectId); you can see that select-word-link trigger select-word-link it self of div without word. and recursive click triggers. That it will not work and a bad code to do this.

Parth Trivedi Over a year ago

In your question you are having .select and .select-word-link and in your comment you are only have select-word-link. If you are only have all select-word-link then it makes recursive call else works fine. @mangotasche

Yogendra Tomar · Accepted Answer · 2020-10-12 12:20:45Z

0

very simple solution

$('#select-5 , .select-word-link').click(function () {
// your code
});

If you want trigger same functionality from 2 or more different div ids or classes or combination of both then put separated by , like '#select-5 , .select-word-link' as shown in above example.

answered Oct 12, 2020 at 12:20

Yogendra Tomar

1216 bronze badges

Collectives™ on Stack Overflow

jQuery: add click event to specific id

6 Answers 6

3 Comments

Comments

1 Comment

Comments

5 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

6 Answers 6

3 Comments

Comments

1 Comment

Comments

5 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related