使用javascript在表單文本字段旁邊插入html鏈接

Question

我有一個包含名字和姓氏的表格。

通過單擊“添加更多”鏈接可以克隆/復制它們。

這是代碼。

<form>
    <p class="clone">
    First name: <input type="text" name="fname[]" value=""><br>
Last name: <input type="text" name="lname[]" value=""><br>
    </p>
   </form>
<a href="#" class="add" rel=".clone">Add More</a>

這是jsfiddle演示http://jsfiddle.net/d6mYr/

現在，我想將此鏈接插入姓氏文本表單字段旁邊。

<a href="#">Example</a>

目前，我的表單在表單字段中沒有類屬性。 它只有名稱屬性。

那么有人可以幫助我使用jquery自動添加該鏈接嗎？

Answer 1

不使用該relCopy插件

$(function() {
    var exampleLink = $('<a href="#">Example</a>')
    exampleLink.insertAfter('input[name="lname\[\]"]')

    $('a.add').click(function() {
        var removeLink = $('<a href="#" />').text('Remove').click(function() {
            $(this).parent().slideUp(function() {
                $(this).remove();
            })
        });

        var new_row = $('.clone:first').clone();
        new_row.append(removeLink)
        new_row.appendTo($(this).prev());
    });
});​

http://jsfiddle.net/d6mYr/3/

Answer 2

看起來您已經在添加鏈接，但是它位於“名字”下方。 嘗試在輸入姓氏后刪除BR標簽：

<form>
    <p class="clone">
    First name: <input type="text" name="fname[]" value=""><br>
    Last name: <input type="text" name="lname[]" value="">
    </p>
</form>
<a href="#" class="add" rel=".clone">Add More</a>

Answer 3

您可以在relCopy函數調用之前添加以下內容：

  var exampleLink = '<a href="#">Example</a>';
  $('input[name="lname[]"]').last().after(exampleLink);