javascript - OnClick get "id" attribute of "a" tag - Stack Overflow

admin管理员组

文章数量:1278652

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.********/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 :)

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.********./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 :)

• javascript
• jquery
• html
• events
• jquery-mobile

Share Improve this question Follow asked Feb 3, 2013 at 15:01 Jakub ZakJakub Zak 1,23266 gold badges3333 silver badges5353 bronze badges 4

• 2 Multiple id='search_r' are a no-no. – Oleg Commented Feb 3, 2013 at 15:03
• 1 .live() is deprecated. Use .on() instead. – Antony Commented Feb 3, 2013 at 15:04
• Actually tried to use .on() with no luck. And in jQuery 1.8.2 it works just fine. – Jakub Zak Commented Feb 3, 2013 at 15:25
• Although in next prototype I'll try to tidy all my js and php files only with newest and not deprecated functions and methods. – Jakub Zak Commented Feb 3, 2013 at 15:26

Add a ment  | 

3 Answers 3

Sorted by: Reset to default 4

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 pletely moot.
    //window.location.href = "http://imes.********./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.

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?

.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.

本文标签： javascriptOnClick get quotidquot attribute of quotaquot tagStack Overflow