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

我有一個JavaScript的視圖，使ajax調用我的控制器。我正在循環訪問數據，並且正在建立一個表格。我需要做的是爲表中的每個項目，使其成爲超鏈接，然後當用戶點擊任何鏈接時，我想用鏈接的值填充文本框。jquery：用超鏈接的值填充文本框

到目前爲止，我的代碼循環瀏覽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類型的標籤的點擊事件編寫一個jQuery處理程序，那就太好了。這可能嗎？感謝您花時間閱讀這篇文章。

編輯：

我使用jQuery 1.8版。除了上面的代碼中，我已經添加了一些JavaScript來嘗試基於一個click事件自動填充文本框：

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

如果我理解正確的話，ev.preventDefault（）應該重定向我駐足瀏覽器到另一個頁面。但這似乎並沒有奏效。當我點擊任何超鏈接時，它會重新加載當前頁面。

來源

2012-09-05 dot

'，當用戶點擊任何鏈接時，我想用鏈接的值填充文本框。' - 你能再解釋一下嗎？您正在從ajax調用中加載表格，並且您希望將每個表格單元格的內容作爲鏈接。然後當用戶點擊鏈接時，它會將數據加載到單獨的文本框中。點擊數據來自哪裏？ – AndrewR

@AndrewR。看看下面Andreas的例子。這正是我想要做的。我無法讓我的工作......但我認爲這將澄清我後。 – dot

使用.on()委託版本，並添加一個單擊處理程序到你的ajax容器。

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

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

Example從另一個問題，但它是非常接近這一解決方案只是沒有link標籤:)

編輯
jQuery的版本低於1.7，你可以使用.delegate()代替

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

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

來源

2012-09-05 19:15:02 Andreas

謝謝你。雖然#clientajaxcontainer不是函數，但我得到一個錯誤。我在＃availVLANS.click邏輯後添加了代碼段。 – dot

完整的錯誤消息是：[15：28：10.086] TypeError：$（「＃clientajaxcontainer」）。on不是函數@ http：//mysite/myapp/index.php/mycontroller/method。我會仔細看看你發佈的代碼示例，看看我是否可以弄明白。 – dot

@dot看起來你使用的是舊版本的jQuery（1.7以下）。我已經編輯了我的答案 – Andreas

我不會創建鏈接爲一個HTML字符串，但它們創建爲jQuery的元素，所以你可以指定一個點擊監聽，對他們說：

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

來源

2012-09-05 19:14:50

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

回答

相關問題