Use jQuery click to handle anchor onClick()

Question

I have a set of dynamically generated anchor tags in a for loop as follows:

<div id = "solTitle"> <a href = "#"  id = "' + tagId + '" onClick = "openSolution();"> ' + solTitle + '</a></div> <br>';

Once this code is executed the html output for one of the case would look like:

<div id = "solTitle"> <a href = "#"  id = "solution0" onClick = "openSolution();">Solution0 </a></div> <br>

<div id = "solTitle"> <a href = "#"  id = "solution1" onClick = "openSolution();">Solution1 </a></div> <br>

Now I want different texts to be displayed on clicking the above links. openSolution() looks like this:

function openSolution() {
    alert('here');
    $('#solTitle a').click(function(evt) {
        evt.preventDefault();
        alert('here in');
        var divId = 'summary' + $(this).attr('id');

        document.getElementById(divId).className = '';

    });
}

When I execute it and click on either of the links, the flow doesnot come inside the jquery click handler. I checked it by the above alerts used. It only displays the alert - 'here' and not the alert - 'here in'. On clicking the link second time, everything works perfectly with correct value of divId.

James Allardice · Accepted Answer · 2012-01-18 10:12:31Z

114

The first time you click the link, the openSolution function is executed. That function binds the click event handler to the link, but it won't execute it. The second time you click the link, the click event handler will be executed.

What you are doing seems to kind of defeat the point of using jQuery in the first place. Why not just bind the click event to the elements in the first place:

$(document).ready(function() {
    $("#solTitle a").click(function() {
        //Do stuff when clicked
    });
});

This way you don't need onClick attributes on your elements.

It also looks like you have multiple elements with the same id value ("solTitle"), which is invalid. You would need to find some other common characteristic (class is usually a good option). If you change all occurrences of id="solTitle" to class="solTitle", you can then use a class selector:

$(".solTitle a")

Since duplicate id values is invalid, the code will not work as expected when facing multiple copies of the same id. What tends to happen is that the first occurrence of the element with that id is used, and all others are ignored.

edited Jan 18, 2012 at 10:12

answered Jan 18, 2012 at 10:00

James Allardice

166k22 gold badges335 silver badges316 bronze badges

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

3 Comments

Toni Michel Caubet Over a year ago

that won't be valid since the #soltitle is being repeated

James Allardice Over a year ago

@ToniMichelCaubet - I have mentioned that in the last paragraph. I guess it could be a bit clearer though, thanks.

Enriqe Over a year ago

This answer is obsolete nowadays. jQuery today uses .on('click', function() { instead of .click(function() {

Menahem · Accepted Answer · 2016-06-16 07:42:22Z

13

Lets take an anchor tag with an onclick event, that calls a Javascript function.

<a href="#" onClick="showDiv(1);">1</a>

Now in javascript write the below code

function showDiv(pageid)
{
   alert(pageid);
}

This will show you an alert of "1"....

edited Jun 16, 2016 at 7:42

Menahem

4,1742 gold badges31 silver badges44 bronze badges

answered Oct 10, 2013 at 14:32

Tapan kumar

7,0191 gold badge28 silver badges26 bronze badges

3 Comments

jacurtis Over a year ago

This doesn't actually answer the question. The question was how to use jQuery to handle the click. Your answer only works with vanilla javascript and not jQuery.

Steve Greene Over a year ago

Yeah, but it made me think. This was easier in my case.

Merr Leader Over a year ago

The onclick event has a lowercase c, not an uppercase.

Karl Mendes · Accepted Answer · 2012-01-18 10:09:16Z

5

The HTML should look like:

<div class="solTitle"> <a href="#"  id="solution0">Solution0 </a></div>
<div class="solTitle"> <a href="#"  id="solution1">Solution1 </a></div>

<div id="summary_solution0" style="display:none" class="summary">Summary solution0</div>
<div id="summary_solution1" style="display:none" class="summary">Summary solution1</div>

And the javascript:

$(document).ready(function(){
    $(".solTitle a").live('click',function(e){
        var contentId = "summary_" + $(this).attr('id');
        $(".summary").hide();
        $("#" + contentId).show();
    });
});

See the Example: http://jsfiddle.net/kmendes/4G9UF/

answered Jan 18, 2012 at 10:09

Karl Mendes

6494 silver badges9 bronze badges

1 Comment

Paul Smith Over a year ago

Note that live() is deprecated in jQuery 1.7 and removed in 1.9. The recommended method to attach event listeners is on(). ref: api.jquery.com/live

Toni Michel Caubet · Accepted Answer · 2014-01-09 20:06:24Z

3

<div class = "solTitle"> <a href = "#"  id = "solution0" onClick = "openSolution();">Solution0 </a></div> <br>

<div class= "solTitle"> <a href = "#"  id = "solution1" onClick = "openSolution();">Solution1 </a></div> <br>



$(document).ready(function(){
    $('.solTitle a').click(function(e) {
        e.preventDefault();
        alert('here in');
         var divId = 'summary' +$(this).attr('id');

        document.getElementById(divId).className = ''; /* or $('#'+divid).removeAttr('class'); */

    });
 });

I changed few things:

remove the onclick attr and bind click event inside the document.ready
changed solTitle to be an ID to a CLASS: id cant be repeated

edited Jan 9, 2014 at 20:06

answered Jan 18, 2012 at 10:05

Toni Michel Caubet

20.3k59 gold badges220 silver badges390 bronze badges

Comments

Toni Michel Caubet · Accepted Answer · 2014-01-09 20:05:53Z

2

You can't have multiple time the same ID for elements. It is meant to be unique.

Use a class and make your IDs unique:

<div class="solTitle" id="solTitle1"> <a href = "#"  id = "solution0" onClick = "openSolution();">Solution0 </a></div>

And use the class selector:

$('.solTitle a').click(function(evt) {

    evt.preventDefault();
    alert('here in');
    var divId = 'summary' + this.id.substring(0, this.id.length-1);

    document.getElementById(divId).className = ''; 

});

edited Jan 9, 2014 at 20:05

Toni Michel Caubet

20.3k59 gold badges220 silver badges390 bronze badges

answered Jan 18, 2012 at 10:00

Didier Ghys

30.6k9 gold badges77 silver badges82 bronze badges

Comments

Chandan Kumar · Accepted Answer · 2016-08-26 18:33:30Z

1

You are assigning an onclick event inside an function. That means once the function has executed once, the second onclick event is assigned to the element as well.

Either assign the function onclick or use jquery click().

There's no need to have both

edited Aug 26, 2016 at 18:33

Chandan Kumar

4,6228 gold badges45 silver badges63 bronze badges

answered Jan 18, 2012 at 10:00

clem

3,3661 gold badge24 silver badges33 bronze badges

Collectives™ on Stack Overflow

Use jQuery click to handle anchor onClick()

6 Answers 6

3 Comments

3 Comments

1 Comment

Comments

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

6 Answers 6

3 Comments

3 Comments

1 Comment

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related