Question

I have a question. I have 8 buttons that have unique incrementing id’s and a shared class.

<button class="btnChapter" id="btnChapter_1" value="1">1</button>
<button class="btnChapter" id="btnChapter_2" value="2">2</button>
<button class="btnChapter" id="btnChapter_3" value="3">3</button>
...

In order to prevent me from duplicating code, I bound a click event to the btnChapter class instead of binding an event individually to each button’s ID.

$('.btnChapter').click(function(){ .. do stuff .. });

How do I trigger() the click() event only for #btnChapter_2? The following doesn’t seem to work.

$('#btnChapter_2').click()

Answer 1

Your code seems to be fine. Can you check whether the click event is actually binded to the button controls.

One reason I can think of is the code is the javascript is executed before the dom is ready, so the $('.btnChapter') selector may not return any element.

Can you check what is the value returned by $('.btnChapter').length soon after the click event is binded.

Note: Can you manually click on the buttons and check whether the event is fired?

Here is a sample I did in JSFIDDLE, it works fine for me.