Question

我在视图上有一些javascript，它对我的控制器进行ajax调用。我在循环数据，我正在构建一个表。我需要做的是对表中的每个项目，使其成为超链接，然后当用户点击任何链接时，我想用文本框填充链接的值。

到目前为止，我的代码循环遍历json数据并构建我的表。以下是代码片段：

            htmlstring = htmlstring + "<th>VlanId</th><th>Name</th>";
    for(i = 0; i < returnDataFromController.length; i++) {
        //alert(returnDataFromController[i].VlanId);
        htmlstring = htmlstring +  "<tr><td><a href=''>"+returnDataFromController[i].VlanId+"</a></td><td>"+ returnDataFromController[i].Name+"</td></tr>";          
    }
    submitFormHTML = "<input type='text' id='newVlanID' style='width:5em;height:1.5em'/>&nbsp;&nbsp;<button class='btn' id='saveVlan' style='width:10em;height:2em'>Reassign Vlan</button>";
    $('#clientajaxcontainer').html(htmlstring);
    $('#newvlanform').html(submitFormHTML);

为了完成我想要做的事情，我是否需要为每个标签指定一个唯一的名称，或者我可以将它分配给一个类？如果我可以为每个标记分配某个类（例如）classX ...然后为类型为classX的标记的click事件编写一个jquery处理程序，那就太好了。这可能吗？感谢您抽出宝贵时间阅读这篇文章。

修改

我使用的是jquery 1.8版。除了上面的代码之外，我还添加了一些javascript来尝试根据点击事件自动填充文本框：

 $('clientajaxcontainer').on("click", "td:first-child a", function(ev) {
  ev.preventDefault();
  $('#newVlanID').val($(this).text());
  });

如果我理解正确，ev.preventDefault（）应该阻止浏览器将我重定向到另一个页面。但这似乎并没有奏效。当我点击任何超链接时，它会重新加载当前页面。

Answer 1

使用.on()的委托版本，并为您的ajax容器添加一个点击处理程序。

$("#clientajaxcontainer").on("click", "td:first-child a", function(ev) {
    ev.preventDefault();

    $("#newVlanID").val($(this).text());
});

来自另一个问题的

Example但是，如果没有链接标记，它就非常接近这个解决方案：）

修改
对于1.7以下的jQuery版本，您可以使用.delegate()代替

$("#clientajaxcontainer").delegate("td:first-child a", "click", function(ev) { ev.preventDefault(); $("#newVlanID").val($(this).text()); });

Answer 2

我不会将链接创建为HTML字符串，而是将它们创建为jQuery元素，因此您可以为它们分配一个点击监听器：

var link = $("<a href=#>"+ yourVar +"</a>");
link.click(function(){
  alert("Do something with "+ $(this).html());
  return false;
});
$(yourDomElement).append(link);

jquery：使用超链接的值填充文本框

2 个答案: