Q:

jQuery selector with this reference

This is my HTML:
<div class="btn-group  btn-group-justified"> 
     <a id="option1" data-option="1" class="btn btn-default" href="#">3</a>
     <a id="option2" data-option="2" class="btn btn-default" href="#">6</a>
     <a id="option3" data-option="3" class="btn btn-default" href="#">9</a>
     <a id="option4" data-option="4" class="btn btn-default" href="#">12</a>
     <a id="option5" data-option="5" class="btn btn-default" href="#">15</a>
</div>

    <p id="pp"></p>

And my jQuery:
$("[id^='option']").click(function () {
    $("#pp").html(this.attr("data-option"));
});

The codes are simplified to point the problem easier.
What I want to do is getting data-option attribute value of clicked a element to the p element with id="pp".
Something is wrong with this reference I guess. 
I do not want to write the same code 5 times,  so I tried to use starts with operator I think this reference refers to something else. 

A:

inside the handler this refers to the dom element, it does not have .attr() method so you need to get the jQuery wrapper reference for that element using $(this).attr('data-option')
$("[id^='option']").click(function () {
    $("#pp").html($(this).attr("data-option"));//since the attribute is `data-option` $(this).data("option") also will work
});

