jQuery的前面加上一個按鈕元素

Question

嘿所有我有下面的代碼，增加了一個DUP按鈕，我的表：

.....[More code above]..... 
_createDeleteButton: function (a) { 
    return this._createGridButton(this.deleteButtonClass, 
           this.deleteButtonTooltip, function (b, c) { 
    b.deleteItem(a), c.stopPropagation() 
    }) 
}, 
_createGridButton: function (a, c, d) { 
    var e = this._grid; 
    //Creates the Dup button 
    var r = $('<input/>').attr({ 
     type: "button", 
     id: "field", 
     value: 'new', 
     class: "dup" 
     }).on("click", function (a) { 
      alert('hello'); 
     }) 

    //Creates the DELETE button 
    return b("<input>").addClass(this.buttonClass).addClass(a).attr({ 
       type: "button", 
       title: c 
     }).on("click", function (a) { 
      d(e, a) 
     }).prepend(r); 
}, 
.....[More code below]..... 

最終的結果看起來是這樣的：

注意如何dup元件是內刪除元件！

我也tryed如下：

}).after(r); 

哪些不必須的DUP元素在所有...

}).insertAfter(r); 

而且再次它d OES不顯示DUP元素...

}).before(r); 

還沒顯示DUP ...

}).append(r); 

這同樣有效，但地方dup到不正確的地方...

}).prepend(r); 

而且同樣適用於這一個以及..

//Creates the DELETE button 
var a = b("<input>").addClass(this.buttonClass).addClass(a).attr({ 
     type: "button", 
     title: c 
}).on("click", function (a) { 
     d(e, a) 
}); 
return $(r).insertAfter(a); 

犯規顯示刪除元素現在但確顯示Dup element ...

那麼我做錯了什麼？我期待有它看起來像這樣：

Answer 1

也許它的工作原理與$(r).insertAfter("<delete button>")。

Answer 2

$("div").prepend("<input>")表示在元素內插入輸入，但在開始。

$("div").append("<input>")表示在元素內插入輸入，但在末尾處插入輸入。

$("div").after("<input>")裝置插入輸入div

$("div").before("<input>")裝置之後插入輸入之前div

prependTo/appendTo和insertBefore/insertAfter它們是同上述那些，但elemens顛倒右，例如$("<input>").prependTo("div")

據我所知，你想insertAfter刪除按鈕。如果a是刪除按鈕，然後$(r).insertAfter(a)應該工作

見下面的例子，其中a裏面div的p。

也許是爲了工作片段，以瞭解是否正確創建您的按鈕，因爲我不能複製你的問題

var r = $('<input/>').attr({ 
 
    type: "button", 
 
    id: "field", 
 
    value: 'new', 
 
    class: "dup" 
 
}).on("click", function(a) { 
 
    alert('hello'); 
 
}) 
 
var a = $('div p') 
 
$(r).insertAfter(a);

/* CASE STUDY */ 
 

 
body { 
 
    margin: 0; 
 
} 
 

 
section#casestudy { 
 
    height: 750px; 
 
    max-width: 100%; 
 
} 
 

 
section#casestudy div.row { 
 
    height: 250px; 
 
    max-width: 100%; 
 
    text-align: center; 
 
    position: relative; 
 
} 
 

 
section#casestudy .four { 
 
    position: relative; 
 
    max-width: 100%; 
 
    display: inline-block; 
 
    margin: 0 auto; 
 
} 
 

 
#casestudy h4 { 
 
    color: #000000; 
 
    font-size: 20px; 
 
    padding-top: 50px; 
 
    line-height: 5px; 
 
} 
 

 
section#casestudy p { 
 
    font-size: 10px; 
 
    color: #bdc3c7; 
 
    position: absolute; 
 
    top: 50%; 
 
    left: 50%; 
 
    margin-right: -50%; 
 
    transform: translate(-50%, -50%) 
 
} 
 

 
#council div.row { 
 
    display: block; 
 
    background-color: #d3d3d3; 
 
    width: 960px; 
 
} 
 

 
#council img { 
 
    float: right; 
 
} 
 

 
#council h2 { 
 
    font-size: 20px; 
 
    text-align: left; 
 
    color: #000000; 
 
} 
 

 
#council div.row p { 
 
    font-size: 10px; 
 
    text-align: left; 
 
    width: 50%; 
 
} 
 

 
.four h3 { 
 
    position: absolute; 
 
    color: #FFF; 
 
    font-size: 20px; 
 
    margin: 0; 
 
    top: 50%; 
 
    left: 50%; 
 
    transform: translate(-50%, -50%); 
 
} 
 

 
section#casestudy img { 
 
    display: block; 
 
    margin-left: 20px; 
 
    padding: 10px; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div> 
 
    <p> 
 
    Some text here 
 
    </p> 
 
</div>