jQuery préfixer à un élément de bouton

Question

Hey tout ce que j'ai le code suivant qui ajoute un bouton dup à ma table:

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

Le résultat final ressemble à ceci:

Remarquez comment le dup élément est dans le Supprimer élément!

J'ai aussi tryed les éléments suivants:

}).after(r); 

Ce qui ne marche pas avoir l'élément dup du tout ...

}).insertAfter(r); 

Et encore une fois d OES pas montrer l'dup élément ...

}).before(r); 

Pas encore montrant le dup ...

}).append(r); 

Encore une fois cela fonctionne, mais les lieux dup dans le mauvais endroit ...

}).prepend(r); 

Et en va de même pour celui-ci et ..

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

montrent l'Doesnt Supprimer élément maintenant mais fait montre le Dup élément ...

Alors qu'est-ce que je fais à tort ?? Je cherche à avoir ressemble à ceci:

Answer 1

Peut-être que cela fonctionne avec $(r).insertAfter("<delete button>").

Answer 2

$("div").prepend("<input>") signifie insérer l'entrée à l'intérieur de l'élément mais au en commençant par.

$("div").append("<input>") signifie insérer l'entrée à l'intérieur de l'élément mais au et à l'extrémité.

$("div").after("<input>") moyens insérer l'entrée juste après les div

$("div").before("<input>") moyen d'insérer l'entrée juste avant le div

prependTo/appendTo et insertBefore/insertAfter ils sont les mêmes que celles ci-dessus, mais les Elemens sont inversées, par exemple $("<input>").prependTo("div")

comme je comprends que vous voulez insérerAprès le bouton de suppression. si a est le bouton de suppression puis $(r).insertAfter(a) devrait fonctionner

voir exemple ci-dessous où a est le p intérieur div.

font peut-être un extrait de travail pour voir si vos boutons sont créés correctement parce que je ne peux pas reproduire votre problème

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>