Question

Maybe isn’t good title for the question but my problem is exactly this.
I have several DIV tags on the page and all of them start as #result and continue with number <div id="result22">, <div id="result33"> etc. Now I’m find some nice jQuery things to do and it works as expected but the only problem is how to add known number to the #result
here is the code:

<script type="text/javascript">
   $(document).ready(function() {
     $('.like').bind('click', function () {
       $.get("/sng_like/"+this.id+"/", function(data) {
         $('#result')[0].innerHTML=data;
     });
   });
 });
</script>

I want that value of this.id to be a part of the #result to get #result22 for example.
My JS knowledge is limited and I was already try $('#result'+this.id)[0].innerHTML=data; but it wont work.

Thanks,
G

Answer 1

$(document).ready(function() {
     $('.like').bind('click', function () {
       var item=$(this);
       $.get("/sng_like/"+item.attr("id")+"/", function(data) {
         $('#result'+item.attr("id")).html(data);
     });
   });
});

As of jQuery 1.7, the .on() method is the preferred method for attaching event handlers to a document. So you may consider using that.

If you are using 1.7+ version, your code can be rewritten to use on function like this

$(function(){
   $(document).on("click",".like",function(){
       var item=$(this);           
       $.get("/sng_like/"+item.attr("id")+"/", function(data) {
          $('#result'+item.attr("id")).html(data);
       });
   });
});

$(function() is a short form of $(document).ready(function()