Question

我正在尝试制作一个转发器html文本框控件，该控件将在其下添加另一个字段并删除btn。 “ +添加更多”工作正常，但删除btn还在其下添加更多控件。

我想知道实现它的正确方法。

public partial class Form1 : Form
{
    Bitmap bitmap;

    public Form1()
    {
        InitializeComponent();
    }

    private void Form1_Load(object sender, EventArgs e)
    {
        bitmap = new Bitmap(pictureBox1.ClientSize.Width, 
        pictureBox1.ClientSize.Height, 
        System.Drawing.Imaging.PixelFormat.Format32bppArgb);

    }

    Point p1 = new Point();
    Point p2 = new Point();
    Pen pen = new Pen(Color.Magenta, 10);

    private void pictureBox1_MouseDown(object sender, MouseEventArgs e)
    {
        if (e.Button == MouseButtons.Left)
            p1 = e.Location;
    }

    private void pictureBox1_MouseUp(object sender, MouseEventArgs e)
    {

        if (e.Button == MouseButtons.Left)
        {
            p2 = e.Location;
            Graphics g = Graphics.FromImage(bitmap);
            g.DrawLine(pen, p1, p2);
            pictureBox1.Invalidate();
            g.Dispose();
        }
    }

    private void button1_Click(object sender, EventArgs e)
    {
        pictureBox1.BackColor = Color.Aqua;
    }

    private void pictureBox1_Paint(object sender, PaintEventArgs e)
    {
        e.Graphics.DrawImage(bitmap, 0, 0, bitmap.Width, bitmap.Height);
    }
}

$(function() {

  $('.btn-add-phone').click(function() {
    var sInputGroupPhoneHtml = ('<div class="form-group form-group-options"><div class="input-group input-group-option col-xs-12"><input type="text" name="option[]" class="form-control" placeholder="Phone Number" style="width:50%"><select class="form-control" style="width:50%"><option value="Work">Work</option><option value="Home">Home</option><option value="Mobile">Mobile</option><option value="Other">Other</option></select><span class="input-group-addon input-group-phone-remove text-left"> <span class="glyphicon glyphicon-trash"></span></span></div></div>');

    $(this).append(sInputGroupPhoneHtml);

  });

  $('.btn-add-email').click(function() {
    var sInputGroupEmailHtml = ('<div class="form-group form-group-options"><div class="input-group input-group-option col-xs-12"><input type="email" name="option[]" class="form-control" placeholder="Email" style="width:50%"><select class="form-control" style="width:50%"><option value="Work">Work</option><option value="Personal">Personal</option><option value="Other">Other</option></select><span class="input-group-addon input-group-email-remove text-left"> <span class="glyphicon glyphicon-trash"></span></span></div></div>');

    $(this).append(sInputGroupEmailHtml);

  });

  $('.input-group-email-remove').click(function() {
    $(this).parent().remove();
  });



  jQuery(".toggleControlsPhone a").click(function() {
    jQuery(".showPhoneControls").toggle();
  });

  jQuery(".toggleControlsEmail a").click(function() {
    jQuery(".showEmailControls").toggle();
  });
});

div.input-group-option:last-child input.form-control {
  border-bottom-right-radius: 3px;
  border-top-right-radius: 3px;
}

div.input-group-option span.input-group-addon-remove {
  cursor: pointer;
}

div.input-group-option {
  margin-bottom: 3px;
}

View on JSFiddle

Answer 1

我看到两个问题：

在添加sInputGroupEmailHtml时，会将其添加到单击的<a>标记中。因此，单击这些元素内的任何位置将bubble up标记到<a>标记并触发事件以添加新组。我已将其更改为附加到<a>标记的父.form-group（在<a>标记的外部和之后）。
将点击处理程序绑定到.input-group-email-remove时，该元素在DOM中尚不存在。（仅当您单击“添加更多”按钮时才添加。）我使用了event delegation来将处理程序绑定到#addPhoneMore而不是按钮本身，以便处理程序即使在动态生成时也会触发孩子们。我还使用closest()查找被点击按钮的.form-group。参见Event binding on dynamically created elements。

$(function() {

  $('.btn-add-phone').click(function() {
  
    var sInputGroupPhoneHtml = ('<div class="form-group form-group-options"><div class="input-group input-group-option col-xs-12"><input type="text" name="option[]" class="form-control" placeholder="Phone Number" style="width:50%"><select class="form-control" style="width:50%"><option value="Work">Work</option><option value="Home">Home</option><option value="Mobile">Mobile</option><option value="Other">Other</option></select><span class="input-group-addon input-group-phone-remove text-left"> <span class="glyphicon glyphicon-trash"></span></span></div></div>');

    $(this).parent().append(sInputGroupPhoneHtml);

  });

  $('#phoneAddMore').on('click', '.input-group-phone-remove', function() {
    $(this).closest('.form-group').remove();
  });

});

div.input-group-option:last-child input.form-control {
  border-bottom-right-radius: 3px;
  border-top-right-radius: 3px;
}

div.input-group-option span.input-group-addon-remove {
  cursor: pointer;
}

div.input-group-option {
  margin-bottom: 3px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<link type="text/css" rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.css" />
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>


<div class="form-group" id="phoneAddMore">
  <label class="control-label">Phone</label>
  <div class="form-group form-group-options">
    <div class="input-group input-group-option col-xs-12">
      <input type="text" name="option[]" class="form-control" placeholder="Phone Number" style="width:50%">
      <select class="form-control" style="width:50%">
        <option value="Work">Work</option>
        <option value="Home">Home</option>
        <option value="Mobile">Mobile</option>
        <option value="Other">Other</option>
      </select>
    </div>
    <a hre="#" class="btn-add-phone">+ add more </a>
  </div>

  <div class="clearfix"></div>

</div>

用删除重复HTML控件的正确方法是什么

1 个答案: