CODEWITHSUNDEEP
jquery
Sam
Sam

Reputation: 328

How to first get ID and then use it in jQuery?

I am trying to do this:

  1. Get ID from data-status attribute of .addlink and store it as post_id.
  2. Clicking on .mar-post_id will toggle .finished-reading from #statusfor-post_id

I have the following code but it does not work. What could I be doing wrong?

jQuery(".addlink").click(function(){
    var post_id = jQuery(this).attr("data-status");
    jQuery(".mar-"+post_id).click(function() {
        jQuery("#statusfor-"+post_id).toggleClass( "finished-reading" );
    });
});

The following is the HTML markup.

<div class="simple-card" id="statusfor-12">
<div class="simple-card-actions">
<span class="wpfp-span">
<a class="addlink mar-12" href="#" data-status="12">Click me to toggle</a>
</span>
</div>
</div>

Upvotes: 0

Views: 55

Answers (1)

Marko Gresak
Marko Gresak

Reputation: 8207

I have created a fiddle from your code to test this out and it works as you'd expect.

But there could be a problem if you have different html structure, i.e. if .mar-* is nested inside .addlink. The problem in this case is that you add new click event every time, so if you click .mar-*, you'll trigger .addlink's click event, adding new click event listener, so the toggle will trigger multiple times.

It's hard to guess how to fix this without seeing full page structure, best thing that I can suggest is take a look at .one().

After question update:

Here's a dirty hack, which adds only one listener to the element: jsfiddle. Keep in mind that _data works in jQuery 1.8+, prior to that it was available as .data (source).

I wouldn't recommend to use this, as _data is private property, so this might break in future.

You could also use vanilla JS addEventListener, without useCapture attribute.

Better approach:

One thing that comes to mind is changing structure of your elements or change when you add click events. It's a bad practice to add an event every time you click something, I would recommend you to add all click listeners as soon as the element is added to page (on domready/window load or when you receive data from ajax call) and then don't change the events after that.

Upvotes: 1

Related Questions