CODEWITHSUNDEEP
jqueryhtmlcsstwitter-bootstrap
Albert MN.
Albert MN.

Reputation: 730

Allow jQuery function to be applied to multiple tags

I use the following little jQuery code;

<script>
    $(document).ready(function() {
        $('#download-btn').click(function() {
            $("#download-btn").html('<span class="glyphicon glyphicon-saved" aria-hidden="true"></span> Downloaded');
            $("#download-btn").last().addClass("disabled");
        })
    });
</script>

and it works as it should - when I click a button with the ID #download-button, it adds a new class, and replaces some html/text. Now, this only seems to work for one button, the top one. It looks like this;

enter image description here

Both buttons are exactly the same, 

<button id="download-btn" type="button" class="center btn btn-primary">
<span class="glyphicon glyphicon-save" aria-hidden="true"></span> Download</button>

I want the jQuery to be applied to the clicked object only, but any clicked object that has the id #download-btn, not just the top one. I could not seem to figure out how to do this without giving every download button a seperate, unique ID and repeat the jQuery function - I was hoping there was a better solution to this.

Upvotes: 1

Views: 203

Answers (3)

Jamiec
Jamiec

Reputation: 136114

There is two things you should do here

  1. Use a class on all buttons you want to apply the same behaviour to - ID's should be unique
  2. Use $(this) inside the handler so that the action(s) get applied to only the clicked button (you can also chain together those two actions)

html:

<button class="download-btn" type="button" class="center btn btn-primary">
<span class="glyphicon glyphicon-save" aria-hidden="true"></span> Download</button>

jQuery: 

$('.download-btn').click(function() {
    $(this).html('<span class="glyphicon glyphicon-saved" aria-hidden="true"></span> Downloaded')
           .addClass("disabled");
})

However, there is a further enhancement here too - you dont need to completely replace the html - instead you could just toggle the class inside the inner span. 

$('.download-btn').click(function() {
    $(this).addClass("disabled")
           .find("span.glyphicon").removeClass("glyphicon-save")
                        .addClass("glyphicon-saved");
})

The above needs some additional work to change the text of the button, i'll leave that to you if you decide to go this route (hint: put the text in another span element!)

Upvotes: 4

Darshan Dave
Darshan Dave

Reputation: 645

Give a different ID to every Button and if you want the same functionality to two button then give the same class name to the buttons and call that class name in javascript or jquery and if you want different functionality to every button than use particular ID and in one page all button have same functionality call by button tag in script.

Upvotes: 0

Sebass van Boxel
Sebass van Boxel

Reputation: 2602

This isn't good programming practice. Element-ID's should be unique within the entire document.

Upvotes: 1

Related Questions