我无法在jquery中获取id

时间:2015-09-03 14:45:05

标签: jquery html

问题是我想获取li的id并提醒它,但是我无法获得id的值它只是警告一个空字符串。我已经坚持了将近3个小时。

这是我的代码:

HTML:

<li id = "3" class = "projectlink">
  <a href="#">
      <div class = "row ellipsis"> 
        <i class = "fa fa-folder-open"> </i>
        <span>My Project</span>
      </div>
  </a>
</li>

JQUERY:

 $(document).on("click",".projectlink",function(){  
    var idx = event.target.id;
    alert(idx);
 });

知道这段代码的问题是什么?

更新

感谢vsync!我能够解决问题。刚刚在这里编辑了这段代码,它真的很有效:

$(document).on("click",".projectlink",function(){  
  var idx = this.id;
  alert(idx);
});

3 个答案:

答案 0 :(得分:4)

您需要将event定义为回调参数

&#13;
&#13;
$(document).on("click", ".projectlink", function(event) {
  var idx = event.target.id;
  alert(idx);
});
&#13;
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<li id="3" class="projectlink">d
  <a href="#" 4 id="">dd
      <div id = "5" class = "row ellipsis"> d
        <i class = "fa fa-folder-open" id = "6">dd </i>
        <span id = "f">My Project</span>
      </div>
  </a>
</li>
&#13;
&#13;
&#13;

  

target属性可以是为事件注册的元素或其后代。将event.target与此进行比较通常很有用,以确定是否由于事件冒泡而处理了事件。当事件冒泡时,此属性在事件委派中非常有用。

取自https://api.jquery.com/event.target/

更新:

因此您需要使用this.id,因为 event.target 属性可以是为该事件注册的元素或其后代没有任何{ {1}}。 id event.currentTarget 是指为活动注册的元素

&#13;
&#13;
this
&#13;
$(document).on("click", ".projectlink", function() {
  var idx = this.id;
  alert(idx);
});
&#13;
&#13;
&#13;

答案 1 :(得分:1)

您的javascript存在一些问题:

  • 请务必在点击处理程序中指定event参数。
  • 使用event.currentTargetthis代替event.target
  • 推荐 - 让id变得更复杂,而不仅仅是数字。

 $(document).on("click", ".projectlink", function (event) {
     var idx = event.currentTarget.id;
     alert(idx);
 });
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<li id="item3" class="projectlink"> <a href="#">
      <div class="row ellipsis"> 
        <i class="fa fa-folder-open"> </i>
        <span>My Project</span>
      </div>
  </a>
</li>

您需要使用event.currentTarget代替event.target的原因必须处理事件链。当click事件被触发时,最深的元素触发初始触发器,然后事件被传递给每个父元素以供它们处理。

在此示例中,点击span(至少在我的浏览器中),该事件冒泡到div.row.ellipsis,然后到达li#item3,然后到{ {1}}等等。换句话说,一旦执行了该元素的所有body处理程序,那么事件就会传递给该元素的父元素并继续循环。

在jQuery发生click事件时,它会分配'event.target click点击to the initial element and the current element that has a event.currentTarget`。

虽然您可以使用handler to来引用this,但我不建议这样做有几个原因。主要是由于JavaScript中的上下文危险。修改方法运行的上下文并不困难,只需使用event.currentTargetFunction.prototype.bind()或(下划线/ lodash's)jQuery.proxy()等。因为_.bind()可以改变了,最好坚持我们可以信赖的this专用财产。同样地使用event更具描述性event.currentTarget,这使得它更易于维护。

答案 2 :(得分:0)

在您的脚本中,event.target.id为“未定义事件”提供错误。修改您的脚本以在调用中包含事件或不使用事件并使用此指针如下所示:

using System;
using System.Collections.Generic;
using System.Linq;
using System.Text;
using System.Xml;
using System.Xml.Linq;

namespace ConsoleApplication1
{
    class Program
    {
        static void Main(string[] args)
        {
            List<Entity> cEntities = new List<Entity>();
            string input =
                "<Entities TotalResult=\"3\">" +
                    "<Entity Type=\"test-set-folder\">" +
                      "<Fields>" +
                          "<Field Name=\"id\">" +
                            "<Value>12457</Value>" +
                          "</Field>" +
                          "<Field Name=\"parent-id\">" +
                            "<Value>0</Value>" +
                          "</Field>" +
                          "<Field Name=\"last-modified\">" +
                            "<Value>2015-03-09 14:09:57</Value>" +
                          "</Field>" +
                          "<Field Name=\"description\">" +
                             "<Value/>" +
                          "</Field>" +
                          "<Field Name=\"view-order\"/>" +
                          "<Field Name=\"name\">" +
                            "<Value>.NET</Value>" +
                          "</Field>" +
                     "</Fields>" +
                   "</Entity>" +
                   "<Entity Type=\"test-set-folder\">" +
                     "<Fields>" +
                        "<Field Name=\"id\">" +
                           "<Value>15487</Value>" +
                        "</Field>" +
                        "<Field Name=\"parent-id\">" +
                          "<Value>0</Value>" +
                        "</Field>" +
                        "<Field Name=\"last-modified\">" +
                          "<Value>2015-03-15 13:00:02</Value>" +
                        "</Field>" +
                        "<Field Name=\"description\">" +
                          "<Value/>" +
                        "</Field>" +
                        "<Field Name=\"view-order\"/>" +
                        "<Field Name=\"name\">" +
                          "<Value>Python</Value>" +
                        "</Field>" +
                     "</Fields>" +
                  "</Entity>" +
                "</Entities>";


            XElement entities = XElement.Parse(input);

            foreach (XElement entity in entities.Descendants("Entity"))
            {
                Entity newEntity = new Entity();
                cEntities.Add(newEntity);

                foreach (XElement field in entity.Descendants("Field"))
                {
                    string name = field.Attribute("Name").Value;
                    string value = field.Element("Value") == null ? "" : field.Element("Value").Value;

                    switch (name)
                    {
                        case "id" :
                            newEntity.id = int.Parse(value);
                            break;
                        case "parent-id":
                            newEntity.parent_id = int.Parse(value);
                            break;
                        case "last-modified":
                            newEntity.last_modified = DateTime.Parse(value);
                            break;
                        case "description":
                            newEntity.description = value;
                            break;
                        case "view-order":
                            newEntity.view_order = value;
                            break;
                        case "name":
                            newEntity.name = value;
                            break;
                    }
                }
            }

            //write data
            foreach(Entity entity in cEntities)
            {
                Console.WriteLine("id: {0}", entity.id);
                Console.WriteLine("parent-id: {0}", entity.parent_id);
                Console.WriteLine("last-modified: {0}",entity.last_modified);
                Console.WriteLine("description: {0}",entity.description);
                Console.WriteLine("view-order: {0}",entity.view_order);
                Console.WriteLine("name: {0}",entity.name);
                Console.WriteLine();

            }
            Console.ReadLine();


        }
        public class Entity
        {
            public int id { get; set; }
            public int parent_id { get; set; }
            public DateTime last_modified { get; set; }
            public string description { get; set; }
            public string view_order { get; set; }
            public string name { get; set; }
        }
    }
}
​