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

最终结果如下：

注意重复元素 元素元素

我还尝试了以下内容：

}).after(r);

根本没有 dup 元素......

}).insertAfter(r);

同样，它没有显示 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 元素...

那么我做错了什么？我希望看起来像这样：

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它们与上面的相同，但是元素是相反的，例如$("<input>").prependTo("div")

据我了解你要插入删除按钮后。如果a是删除按钮，则$(r).insertAfter(a)应该有效

请参阅下面的示例，其中a是p内的div。

也许制作一个工作片段，看看你的按钮是否正确创建，因为我无法复制你的问题

 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>