jQuery prepend auf ein Button-Element

Question

Hey alles, was ich den folgenden Code haben, der eine dup Taste zu meinem Tisch ergänzt:

.....[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]..... 

Das Endergebnis sieht wie folgt aus:

Beachten Sie, wie Das dup Element ist innerhalb das Löschen Element!

Ich habe tryed auch die folgenden:

}).after(r); 

Welche haben die

}).insertAfter(r); 

... überhaupt dup Element tut und wieder d oes nicht zeigen die dup Element ...

}).before(r); 

Immer noch nicht zeigen, die dup ...

}).append(r); 

Wieder funktioniert dies aber Orte dup in die falschen Ort ...

}).prepend(r); 

Und das gleiche für diese geht auch ..

//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); 

Doesnt zeigen die Element löschen jetzt aber zeigt die Dup Element ...

Also was mache ich falsch ?? Ich bin auf der Suche, um es wie folgt aussieht:

Answer 1

Vielleicht klappt es mit $(r).insertAfter("<delete button>").

Answer 2

$("div").prepend("<input>") bedeutet einfügen Eingang im Inneren des Elements, sondern an der Anfang davon.

$("div").append("<input>") bedeutet einfügen Eingang in das Element, aber an der Ende davon.

$("div").after("<input>") Mittel einsetzen Eingang direkt nach den div

$("div").before("<input>") Mittel einsetzen Eingang direkt vor dem div

prependTo/appendTo und insertBefore/insertAfter sie die gleichen wie die oben genannten haben aber den elemens sind umgekehrt werden, beispielsweise $("<input>").prependTo("div")

wie ich verstehe, möchten Sie einfügenNach dem Löschen-Button. wenn a die Schaltfläche Löschen ist dann sollten $(r).insertAfter(a) arbeiten

siehe Beispiel unten, wo a ist die p innerhalb div.

vielleicht einen Arbeits Schnipsel machen, um zu sehen, ob Ihre Tasten richtig erstellt werden, weil ich nicht Ihr Problem

replizieren kann

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>