Question

我尝试在动态生成的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>");

}）;

首次ajax调用后的HTML表格格式：

    Serial#      Date              Name           Email 
    1            08/16             testuser        blablabla
    2           08/17               testuser       blablabal

请让我知道要处理这个问题，如果以这种方式生成动态表效率低或编程不好，则plz会提供改进此代码的建议。感谢。

Answer 1

我正在使用小提琴，而不是原始代码，因为它更新。

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

在HTML中，您有id= "input1"。它应该是id="input1"，没有空格。（也在input2。）它似乎在我的浏览器上工作（Firefox），但它不是标准的，我不相信它适用于所有浏览器。在generateTable1中你做了同样的事情，而且你还错过了curId和class="anchor"之间的空格，这会产生类似<a id=myLinkIdField1class="anchor" href=>的内容。（请注意，您所拥有的空间不在引号内，因此将被忽略。）
运行jsfiddle时，控制台出现错误：“ReferenceError：$未定义”。这意味着您需要告诉jsfiddle导入jQuery。（使用左侧栏中“Frameworkd＆amp; Extensions”下的下拉菜单。）
“ReferenceError：未定义input1Val”。这是因为您调用了变量input1，而不是input1Val。使用任一名称，但要保持一致。与input2类似。
不确定您要对url的{{1}}参数做什么，但它不起作用，至少在jsfiddle：控制台说它试图访问该网址“ http://fiddle.jshell.net/_display/ $％7BpageContext.request.contextPath％7D“（显然基于您的$.ajax参数url - 编码）。
此外，错误消息是乱码。当{javascript尝试将不是字符串的对象转换为字符串但不知道如何转换时，您获得%。查看[object Object]的文档，了解对象$.ajax的类型。
看起来您试图通过覆盖message变量来解决加载URL的问题。但实际上，当你定义函数时，你重新声明了变量，这意味着在函数体内部会覆盖原始声明。结果是成功处理程序仍然使用来自服务器的响应而不是您定义的变量。如果您想使用已定义的变量，请将response更改为function(response)（因为您还没有使用此变量）。
一旦您修复了所有这些内容并触发了更改事件，表中的大多数新条目都是function()。这些来自undefined中的value.Field1，value.Field2和value.Field3; generateTable1是value中的值，例如response。这里的问题是您已将{"field1" : "01/08", "field2": "someval", "field3" : "someval3"}中的字段命名为value等，但之后尝试将其作为field1等进行访问; javascript区分大小写。
您应该始终逃避插入HTML的不可靠文本，因为它可能会导致安全漏洞。例如，假设Field1是用户的名称。如果我使用用户名field1注册，那么当有人从您的服务器加载有关我的数据时，我的恶意代码将在浏览器中运行。并且因为浏览器认为脚本来自您，它将使脚本能够访问用户的cookie，javascript全局变量等;所以我可以用它来做一些非常糟糕的事情。然而，在jsfiddle中展示这一点很棘手，因为它似乎不喜欢javascript中的<script>alert('malicious code!');</script>标签;但<script>会这样做。即使您信任数据源，或者它以某种方式进行过滤，因此它不可能有"field1": "<scr" + "ipt>alert('malicious code!');</scr" + "ipt>"个标记，您仍应养成防止这种情况的习惯。不太严肃的说明，如果有人试图在这些字段中使用<script>或<等字符，则显示可能会出现乱码。基本上你想写&，其中$("#Tbody1Id").append('<tr><td id= "cellId"><a id='+curId+ ' class="achor" href='+""+ '>' + key + '</a></td><td>' + escape(value.field1)+ '<br>' + escape(value.field2) + '</td><td>' + escape(value.field3) + '</td><td>' + escape(value.field3) + '</td><td>' + '</tr>') ;是一个将escape转换为<script>alert('malicious code!');</script>的函数，它会正确显示用户名。我不知道原始javascript或jQuery中的任何此类函数，但在stackoverflow上进行一些搜索应该找到答案。

Answer 2

感谢所有宝贵的时间。我的第一个问题就解决了。我现在得到与每个锚标签相关联的值。问题非常简单，我正在分配我的＆＃39; inkey＆＃39;变量为

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

就足够了！同样，我的div元素没有填充与我的键相关联的值，但为此我想我还要触发另一个ajax调用。

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

2 个答案: