Question

我有动态文本字段，允许用户添加/删除字段。删除所选字段后，文本字段ID将自动重新排序。到目前为止，这是我所做的，但有时会将两行删除，并出现重复的文本字段ID。

 function hapus(i) {
     var $el = $("#field" + i);
     $el.nextAll('.fieldwrapper').each(function (idx, el) {
         $(el).find('[id]').addBack().attr('id', function () {
             return this.id.replace(/\d+$/, idx + i)
         }).filter('input[type="button"][onclick]').attr('onclick', 'hapus(' + (i + idx) + ')')
     })
     $el.remove();
 }

 $(document).ready(function () {
     $("body").on("click", "#addField", function () {

         var intId = $("#buildyourform div").length + 1;
         var fieldWrapper = $("<div id=\"field" + intId + "\" class=\"fieldwrapper\"/>");
         var hidden = $("<input type=\"hidden\" id=\"hiddenField_" + intId + "\" class=\"fieldname\"/>");
         var fpartNo = $("<input type=\"text\" id=\"partNumber_" + intId + "\" class=\"fieldname\"/>");
         var fDescription = $("<input type=\"text\" id=\"description_" + intId + "\" class=\"fieldname\" readonly />");
         var fPrice = $("<input type=\"text\" id=\"price_" + intId + "\" readonly class=\"fieldname\" style=\"width:80px\"/>");

         // remove textboxes and dropdown boxes
        var removeButton = $("<input type=\"button\" class=\"remove\" value=\"-\" onclick=\"hapus("+intId+");\" />");
         removeButton.click(function () {
             $(this).parent().remove();
         });
         fieldWrapper.append(hidden);
         fieldWrapper.append(fpartNo);
         fieldWrapper.append(fDescription);
         fieldWrapper.append(fPrice);
         fieldWrapper.append(removeButton);
         $("#buildyourform").append(fieldWrapper);
         });
     });

在这里演示：JSFiddle

Answer 1

 var count = 1;

 function hapus(i) {
     var $el = $("#field" + i);
     $el.nextAll('.fieldwrapper').each(function (idx, el) {
         $(el).find('[id]').addBack().attr('id', function () {
             return this.id.replace(/\d+$/, idx + i)
         }).find('input[type="button"][onclick]').attr('onclick', 'hapus(' + (i + idx) + ')')
     })
     $el.remove();
 }

 $(document).ready(function () {
     $("body").on("click", "#addField", function () {

         var intId = $("#buildyourform div").length + 1;
         var fieldWrapper = $("<div id=\"field" + intId + "\" class=\"fieldwrapper\"/>");
         var hidden = $("<input type=\"hidden\" id=\"hiddenField_" + intId + "\" class=\"fieldname\"/>");
         var fpartNo = $("<input type=\"text\" id=\"partNumber_" + intId + "\" class=\"fieldname\"/>");
         var fDescription = $("<input type=\"text\" id=\"description_" + intId + "\" class=\"fieldname\" readonly />");
         var fPrice = $("<input type=\"text\" id=\"price_" + intId + "\" readonly class=\"fieldname\" style=\"width:80px\"/>");

         // remove textboxes and dropdown boxes
        var removeButton = $("<input type=\"button\" class=\"remove\" value=\"-\" onclick=\"hapus("+intId+");\" />");
         //removeButton.click(function () {
             //$(this).parent().remove();
         //});
         fieldWrapper.append(hidden);
         fieldWrapper.append(fpartNo);
         fieldWrapper.append(fDescription);
         fieldWrapper.append(fPrice);
         fieldWrapper.append(removeButton);
         $("#buildyourform").append(fieldWrapper);

         });
     });

我做了两个微小的改动。首先，将hapus（）函数中的filter替换为find。其次，删除removeButton.Click，它会导致您的删除问题。小提琴：link

Answer 2

<强> Updated DEMO

嗯，.filter并不是你应该在这种情况下使用的那个。它应该是.find而不是function hapus。 .filter并未更改其onclick内的目标，并且保持不变，从而导致其element上的click被删除。

$el.nextAll('.fieldwrapper').each(function (idx, el) {
         $(el).find('[id]').addBack().attr('id', function () {
             return this.id.replace(/\d+$/, idx + i)
         }).find('input[type="button"][onclick]').attr('onclick', 'hapus(' + (i + idx) + ')')
})

重新排序动态文本字段ID

2 个答案: