OnClick get "id" attribute of "a" tag

Question

I have list view in jQuery Mobile web app this list view is made of elements like this:

<li id='search_r'>
    <a href='#' id='$id' class='s_result'></a>
</li>
<li id='search_r'>
    <a href='#' id='$id' class='s_result'></a>
</li>

Number of element depends on number of search results, its not only these two. When I click on element in list view, in this case:

<li></li>

I need 2 things to happen, one is to assign the 'id' attr from "a" tag inside this specific "li" tag (the clicked one), to the global variable I have called 'search_r'. The click event works fine, but to get attribute from "a" tag I can't manage to do.

Here is my js:

$("#cc_page").ready(function(){
  $("#search_r").live('click', function(){
      search_r = $(this).attr('id');
      window.location.href = "http://imes.********.com/app/userpanel.html#sfpp_page";
  });
});

I know "this" is not solution. I'm really new to js so that's why I'm asking such an ridiculous questions :)

Solution 1

The first problem you've got is duplicate search_r id attributes, which is invalid. These should be changed to classes. Also, you should be using on() with a delegate handler, as live() has been removed from the latest version of jQuery. Try this:

<li class='search_r'>
    <a href='#' id='$id' class='s_result'></a>
</li>
<li class='search_r'>
    <a href='#' id='$id' class='s_result'></a>
</li>

$("#cc_page").on('click', '.search_r', function(){
    var search_r = $('a', this).attr('id');
    console.log(search_r); // just to check it works

    // I assume this is just for testing, otherwise leaving the page 
    // immediately on click renders getting the id completely moot.
    //window.location.href = "http://imes.********.com/app/userpanel.html#sfpp_page";
});

I also assume the $id in your HTML is from some form of templating engine which gets interpreted? If not, those will also need to be made unique.

Solution 2

.live has been deprecated in jQuery since v1.7, and has been removed in v1.9.

You should replace it with .on().

.on has 2 syntaxes for binding elements, whereas .live only had 1.

If the element exists at the time you are binding, you do it like this:

$('.element').on('click', function(){
    .......
});

You can even use the shorthand:

$('.element').click(function(){
    .........
});

If the element does not exist at the time, or new ones will be added (which is what .live was normally used for), you need to use "event delegation":

$(document).on('click', '.element', function(){
    .............
});

NOTE: You want to bind to the closest static element, not always document.

In the meantime, the jQuery Migrate plugin can be used to restore the .live() functionality if you upgrade your jQuery to the newest version.

Solution 3

window.location.href causes the browser to make a new request. Any variables will be reset when the new page loads.

What is your goal with search_r?

Comments

[Jakub Zak]

I'm trying to assign this value to the global variable: search_r, so After clicking on result, new page will be opened and id in global variable will be used to load data needed for this new page.

[dirn]

The scope of a global variable is limited to one request/response. If you need to keep the value longer than that you should consider something like passing it to the new page through the query string or perhaps even changing things around a bit more to use Ajax.

[Jakub Zak]

I am using ajax on next page to load information about db record found by id, but I just can't find a way to pass it. I mean to pass id from that link into next page. With php would be easy, but because I need to keep all my files .html I really can't use php methods.