jQuery not recognizing some attributes after a click

Question

I have this HTML:

<div class="problem_comment_text" id="suggested_solution_text_110" ><p style="font-family: arial;">Solution name: <a class="expand_suggested_solution" href="#" data-suggestion_id="110"  data-problem_id="228">Site to get peoples memories and experiences of every past game</a></p><p style="font-family: arial;">A site that would have a listing of every game for a particular team, and for each game, the fans who saw that game could share their memories of it.  That would give a very holistic view of the game and people would discover much more about their team and the fans of those teams.</p><p style="color: #B77F37;">on Monday, 11-21-2011</p><div style="float:right; width: 250px;"><a class="delete_suggested_solution" data-problem_id="228" data-suggested_solution_id="110" href="#">Delete</a> | <a href="#" class="edit_suggested_solution" data-problem_id="228" data-suggested_solution_id="110" data-solution_text="A site that would have a listing of every game for a particular team, and for each game, the fans who saw that game could share their memories of it.  That would give a very holistic view of the game and people would discover much more about their team and the fans of those teams." data-solution_title="Site to get peoples memories and experiences of every past game">Edit</a></div></div>

and I have this jQuery:

$('.edit_suggested_solution').live('click' , function() {
    // Showing the wait image
    $("#loading").show();

    var problem_id = $(this).attr("data-problem_id");
    var suggested_solution_id = $(this).attr("suggested_solution_id");  
    var solution_title = $(this).attr("solution_title");          
    var solution_text = $(this).attr("solution_text");

    var dataString = 'problem_id='+ problem_id + '&suggested_solution_id=' + suggested_solution_id + '&solution_title=' + solution_title + '&solution_text=' + solution_text;

    alert ("data string: " + dataString );
});

The problem is that when the user presses the edit link, out of the 4 variables which I am trying to get, I can only get the problem_id and the rest are undefined.

Does anyone notice any particular problems with the code to understand why the other variables are undefined?

MatTheCat · Accepted Answer · 2011-11-26 21:59:06Z

2

It seems to me you shouldn't use attr but data to get data- attributes.

answered Nov 26, 2011 at 21:59

MatTheCat

18.8k6 gold badges59 silver badges70 bronze badges

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

1 Comment

melihcelik Over a year ago

And there was already a problem with your HTML. Attribute names were: data-problem_id and data-suggested_solution_id but in your js code you tried to get the second attribute by suggested_solution_id.

Dave L. · Accepted Answer · 2011-11-26 22:06:57Z

0

You need to use one of the following:

$(this).attr("data-suggested_solution_id");  
$(this).data("suggested_solution_id");

Note, attr will always return a string, whereas data will attempt to convert another type, in this case a number.

answered Nov 26, 2011 at 22:06

Dave L.

9,8408 gold badges48 silver badges70 bronze badges

Collectives™ on Stack Overflow

jQuery not recognizing some attributes after a click

2 Answers 2

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related