logo标签列表

jQuery(this).attr('id') 返回 undefined。

javascriptjqueryhtml
4

我正在尝试在单击时从锚点标记中获取值 / ID。代码看起来没问题，但我不知道问题出在哪里; 每次都返回未定义或空。

我还尝试过 jQuery(this).attr("value");, jQuery(this).val(); 和 jQuery(this).attr("id")

我尝试的代码如下：

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

    <script src="https://ajax.googleapis.com/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>
1
jQuery('ul.switch').click('a', ... 这会在 <ul /> 上添加一个点击处理程序。如果被点击，值 'a' 将作为 event.data 传递到事件对象中。使用 .click() 时无法使用事件委托。请改用 .on()。 - Andreas
6个回答
3
你正在对 ul 绑定事件，而不是绑定在锚点上。所以，在事件处理程序内部的 $(this) 指的是 ul，而 ul 没有 id，它将返回 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.com/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>

你把click和on搞混了，你可以按下面的方式使用on。
jQuery('ul.switch').on('click', 'a', function(evt) {
1
是的，@Tushar，你说得对。我只绑定了ul上的事件，这就是获取“未定义”的原因。 - user5115293
2

您似乎混淆了.click()和.on()。

.click()不接受选择器，它直接将处理程序绑定到jQuery对象的元素上。

.on()接受选择器和事件名称作为字符串，例如：

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

这是正在正常执行的代码。你代码中的问题在于你试图在 UL 标签内部的锚点上触发事件。

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

<head>
  <meta charset="UTF-8">
  <title>Document</title>
  <script src="https://ajax.googleapis.com/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>

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

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

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

试试这个

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

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

               jQuery('.clickedId').append(id+'<br>');
            });
        });
0
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>
网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接