admin管理员组

文章数量:1349729

I am trying to get value / id from anchor tag when clicked. Code seems fine to me but I don't know where is problem; it returns undefined or nothing each time.

Also tried jQuery(this).attr("value");, jQuery(this).val(); and jQuery(this).attr("id")

Code which I have tried is following:

<html>
<head>
    <meta charset="UTF-8">
    <title>Document</title>

    <script src=".11.3/jquery.min.js"></script>

</head>
<body>

    <ul class="switch">
        <li value="1"><a href="#" value="1" id="1">link 1</a></li>
        <li value="2"><a href="#" value="2" id="2">link 2</a></li>
        <li value="3"><a href="#" value="3" id="3">link 3</a></li>
        <li value="4"><a href="#" value="4" id="4">link 4</a></li>
    </ul>

    <div class="clickedId"></div>

    <script>
        jQuery(document).ready(function() {
            jQuery('ul.switch').click('a', function(evt) {
                evt.preventDefault();

                var id = jQuery(this).attr("value");

                jQuery('.clickedId').append(id+'<br>');
            });
        });
    </script>
</body>
</html>

I am trying to get value / id from anchor tag when clicked. Code seems fine to me but I don't know where is problem; it returns undefined or nothing each time.

Also tried jQuery(this).attr("value");, jQuery(this).val(); and jQuery(this).attr("id")

Code which I have tried is following:

<html>
<head>
    <meta charset="UTF-8">
    <title>Document</title>

    <script src="https://ajax.googleapis./ajax/libs/jquery/1.11.3/jquery.min.js"></script>

</head>
<body>

    <ul class="switch">
        <li value="1"><a href="#" value="1" id="1">link 1</a></li>
        <li value="2"><a href="#" value="2" id="2">link 2</a></li>
        <li value="3"><a href="#" value="3" id="3">link 3</a></li>
        <li value="4"><a href="#" value="4" id="4">link 4</a></li>
    </ul>

    <div class="clickedId"></div>

    <script>
        jQuery(document).ready(function() {
            jQuery('ul.switch').click('a', function(evt) {
                evt.preventDefault();

                var id = jQuery(this).attr("value");

                jQuery('.clickedId').append(id+'<br>');
            });
        });
    </script>
</body>
</html>
  • javascript
  • jquery
  • html
Share Improve this question asked Sep 22, 2015 at 5:58 mumairmumair 2,81833 silver badges41 bronze badges 1
  • 1 jQuery('ul.switch').click('a', ... this adds a click handler on the <ul />. If clicked the value 'a' is passed as event.data into the event object. With .click() you can't use event delegation. Use .on() instead. – Andreas Commented Sep 22, 2015 at 6:04
Add a ment  | 

6 Answers 6

Reset to default 3

You're binding event on ul not on the anchor. So, $(this) inside the event handler refers to the ul, and ul has no id and it'll return undefined.

Demo

jQuery('ul.switch a').click(function(evt) {
  evt.preventDefault();

  var id = jQuery(this).attr("value");
  jQuery('.clickedId').append(id + '<br>');
});
<script src="https://ajax.googleapis./ajax/libs/jquery/1.10.0/jquery.min.js"></script>
<ul class="switch">
  <li value="1"><a href="#" value="1" id="1">link 1</a>

  </li>
  <li value="2"><a href="#" value="2" id="2">link 2</a>

  </li>
  <li value="3"><a href="#" value="3" id="3">link 3</a>

  </li>
  <li value="4"><a href="#" value="4" id="4">link 4</a>

  </li>
</ul>
<div class="clickedId"></div>

You're confusing click with on, you can use on as follow

jQuery('ul.switch').on('click', 'a', function(evt) {

You seem to be mixing .click() with .on().

.click() doesn't take a selector, it binds the handler directly to the elements of the jQuery object.

.on() does take a selector, but also the event name as a string, like this:

jQuery('ul.switch').on('click', 'a', function(evt) {

jQuery(document).ready(function() {
    jQuery('ul.switch a').click(function(evt) {
        evt.preventDefault();

        var id = jQuery(this).attr('value');

        jQuery('.clickedId').append(id+'<br>');
    });
});

Try this

jQuery(document).ready(function() {
            jQuery('li').click(function(evt) {
                evt.preventDefault();

                var id = jQuery(this).attr("value");

               jQuery('.clickedId').append(id+'<br>');
            });
        });

You are clicking on UL not anchor tag So try this:

<script>
    jQuery(document).ready(function() {
        jQuery(document).on('click', 'ul.switch a', function(evt) {
            evt.preventDefault();

            var id = jQuery(this).attr("value");

            jQuery('.clickedId').append(id+'<br>');
        });
    });
</script>

this is the code that executing properly. problem in your code is that you are trying to fire event on anchor inside UL tag

<script src="https://ajax.googleapis./ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<html>

<head>
  <meta charset="UTF-8">
  <title>Document</title>
  <script src="https://ajax.googleapis./ajax/libs/jquery/1.11.3/jquery.min.js"></script>
</head>

<body>
  <ul class="switch">
    <li value="1"><a href="#" value="1" id="1">link 1</a>
    </li>
    <li value="2"><a href="#" value="1" id="1">link 2</a>
    </li>
    <li value="3"><a href="#" value="1" id="1">link 3</a>
    </li>
    <li value="4"><a href="#" value="1" id="1">link 4</a>
    </li>
  </ul>
  <div class="clickedId"></div>
  <script>
    jQuery(document).ready(function() {
      jQuery('li').click('a', function(evt) {
        jQuery('.clickedId').append($(this).attr("value") + '<br>');
      });
    });
  </script>
</body>

</html>

本文标签： javascriptjQuery(this)attr(39id39) returns undefinedStack Overflow

版权声明：本文标题：javascript - jQuery(this).attr(&#39;id&#39;) returns undefined - Stack Overflow 内容由网友自发贡献，该文观点仅代表作者本人， 转载请联系作者并注明出处：http://www.betaflare.com/web/1743865385a2552488.html， 本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容，一经查实，本站将立刻删除。