Javascript 获取动态生成的锚标记的值

Javascript 获取动态生成的锚标记的值,javascript,jquery,jsp,html4,Javascript,Jquery,Jsp,Html4,我试图在动态生成的html表的一组元素中的每个锚定标记的单击上插入一个div元素。 到目前为止,我只能单击标记,但无法识别单击了哪一行的标记 //response from ajax call which is of json array // form (data retrieved is actually a hashmap in the serverside) $.each(response, function(key, value) { $("#Table1Id").appe

我试图在动态生成的html表的一组元素中的每个锚定标记的单击上插入一个div元素。 到目前为止,我只能单击标记,但无法识别单击了哪一行的标记

//response from ajax call which is of json array 
// form (data retrieved is actually a hashmap in the serverside)

$.each(response, function(key, value) {
    $("#Table1Id").append('<tr><td><a  id= '+curId+ 'class="achor" href='+""+ '>' + key + '</a></td><td>' + value.Date+ '<br>' + value.userName + '</td><td>' + value.userEmail + '</td><td>' + .... </tr> 
});

//to capture the on click event and identify which row is clicked so 
//that I can place the corresponding key's value in Div element.
$('#container1').on('click','a', function (event) {
    event.preventDefault();

    alert('Anchor clicked!');

    var  inkey = $('#container1 a').html() ;
    alert("the key at the anchor clicked is " + inkey) ; 
    // this value is always the first key's value, in this case it's 1 
    //even if I click row 2's <a> tag.

    var sibling = $(this).next('div');

    if(sibling.is('.expanded')){  
        sibling.toggle();  
    }  
    else{  
    alert("reached else") ; 
    control reaches here but won't execute the below line

    $(this).after("<div class='expanded'><table class='border1' width = 39%   style= 'float: left'> " + "<td> date : <div align=left>" + inkey.value.cusip + "</div></td></tr></table></div>");

请让我知道如何处理这个问题,如果以这种方式生成动态表效率低或编程能力差,请提供改进此代码的建议。谢谢。

我是从小提琴开始工作的,而不是原始代码,因为它更为最新

我不认为一般的方法是错误的。但是有几个错误:

  • 在HTML中,您得到了
    id=“input1”
    。它应该是
    id=“input1”
    ,没有空格。(也是在
    input2
    )虽然它在我的浏览器(Firefox)上似乎可以工作,但它不是标准的,我不相信它能在所有浏览器上工作。在
    generateTable1
    中,您做了同样的事情,并且您还遗漏了
    curId
    class=“anchor”
    之间的一个空格,这将导致类似于
    $%7BpageContext.request.contextPath%7D”(这显然是基于
    %
    -编码的
    url
    参数)
  • 此外,错误消息是乱码。
    [object object]
    是javascript试图将非字符串对象转换为字符串但不知道如何转换的对象时得到的。请查看文档中的
    $。ajax
    以查看对象的类型
    message
  • 看起来您试图通过覆盖
    response
    变量来避免加载URL的失败。但实际上,当您定义函数时,您重新声明了该变量,这意味着在函数体内部原始声明被覆盖。结果是成功处理程序仍然使用来自服务器i的响应n读取已定义的变量。如果要使用已定义的变量,请将
    函数(响应)
    更改为
    函数()
    (因为您没有使用此变量)
  • 一旦您修复了所有这些内容并触发了更改事件,表中的大多数新条目都是
    未定义的
    field1:“01/08”,“field2:“someval”,“field3:“someval3”}
    。这里的问题是,您将
    value
    中的字段命名为
    field1
    等,但随后尝试将其访问为
    field1
    等;javascript区分大小写

  • 您应该始终避免将不可靠的文本插入HTML,因为这可能会导致安全漏洞。例如,假设
    field1
    是用户的名称。如果我使用用户名
    注册警报('恶意代码!');
    ,则当有人从您的服务器加载有关我的数据时,我的恶意代码将在浏览器中运行。而且由于浏览器认为脚本来自您,它将允许脚本访问用户的cookie、javascript全局变量等;因此我可能会使用它来做一些非常糟糕的事情。在JSFIDLE中演示这一点很棘手hough,因为它似乎不喜欢javascript中的
    标记;但是
    “field1”:“警报('恶意代码!'”);“
    就可以了。即使你信任数据的来源,或者如果它以某种方式被过滤,因此不可能有
    标记,你还是应该养成防止这种情况发生的习惯。更不严重的是,如果有人试图使用
    之类的字符,显示器可能会乱码。谢谢大家宝贵的时间。我的第一个问题em已经解决了。我现在得到了与每个锚标记相关的值。问题很简单,我将'inkey'变量指定为

        ('#container1 a').html() instead $(this).html() 
    

    已经足够了!我的div元素也没有填充与我的键相关的值,但为此我想我必须触发另一个ajax调用。

    您可能需要创建一个,因为您没有发布全部相关的HTML和JS代码块。您的代码看起来不完整且无效。输入错误?您没有关闭
    else
    括号。t这里有一个实际上没有注释的注释行(
    /
    缺失)。最后一行没有关闭(以
    +
    结束)。提示:使用
    console.log()
    进行调试,而不是
    警报()
    。我已经尝试使用此提琴来完成代码,尽管它不起作用。我可以让完整的代码看到流程或预期的行为。非常感谢您不辞辛劳地阅读整个代码,并感谢您耐心地回答如此详尽的细节。我将纠正您提到的所有要点。我刚刚开始学习使用jQuery,从未使用过小提琴。你能告诉我如何在控制台中查看错误消息吗?控制台不是jQuery或JSFIDLE的东西;它总是可以在浏览器中使用,还有许多其他有用的调试工具。在Firefox中,包是一个名为Firebug的附加组件;在Internet Explorer中,我认为它叫做开发人员工具。你知道吗ght可以通过按F12键访问它。这些错误消息将位于名为Console或其他选项卡下。此外,正如MelanciaUK指出的,如果您编写
    Console.log(“我的消息”);
    ,则消息
    my message
    将显示在此处。
        ('#container1 a').html() instead $(this).html()