Question

我是JQuery的新手，我遇到动态表单问题。我想创建一个动态字段，用户可以根据需要创建任意数量的字段。不幸的是，第二个字段中的选项在第一个字段之后生成，与包装器中的每个动态字段相关。我该如何解决这个问题？

提前谢谢 - 我会感激每一个答案！

var points =  driver.FindElement(By.CssSelector("#site-header > div > div > div.col-xs-8.col-sm-8.col-md-8 > div > div.header-right.header-user-functions > div:nth-child(5) > a > span"));

// perform some kind of check if points has valid data

if (points != null)
    CustomLabel7.Text = points.Text;

<div class='input_fields_wrap'>
<button class='add_field_button'>Add more fields</button>
<div>
    <label for='service'>Usługa</label>
    <select name='service' class='service'>
        <option value='Wybierz' selected>Wybierz</opiton>
        <option value='Listy'>Listy</option>
        <option value='Paczki'>Paczki</option>
    </select>
    <select name='type' class='type'></select>

</div>

Answer 1

将$('.service').change(function(e){更改为$(wrapper).on('change', '.service', function(e) {

$('.service').change(function(e){只会收听当时在场的课程。后者.on()监听包装器，并在.service更改时执行。

我在你的代码中注意到，当你改变一种类型时，所有这些都被替换了。您可以通过向list函数添加参数来解决此问题。如果需要，只需将element替换为'.type'

即可

这看起来像这样

  $(wrapper).on('change', '.service', function(e) {
    e.preventDefault();
    var parent = $(this).val();
    switch (parent) {
      case 'Listy':
        list(listy, $(this).next().next());
        break;
      case 'Paczki':
        list(paczki, $(this).next().next());
        break;
      // TODO: add case for Wybierz
    }
  });

  function list(array_list, element) {
    $(element).html("");
    $(array_list).each(function(i) {
      $(element).append("<option value=" + array_list[i].value + ">" + array_list[i].display + "</option>");
    });
  }

溶液

$(document).ready(function() {
  var listy = [
               {display: 'A', value: 'A'},
               {display: 'B', value: 'B'}];
  var paczki = [
                {display: 'C', value: 'C'},
                {display: 'D', value: 'D'}];

  var max_fields = 20;
  var wrapper = $('.input_fields_wrap');
  var add_button = $('.add_field_button');
  var x = 1;

  $(add_button).click(function(e) {
      e.preventDefault();
      if (x < max_fields) {
        x++;
        $(wrapper).append("<div><label for='service'>Usługa</label>" +
          "<select name='service' class='service' <!-- here -->" +
          "<option value='Wybierz' selected>Wybierz</option>" +
          "<option value='Listy'>Listy</option>" +
          "<option value='Paczki'>Paczki</option>" +
          "</select><a href='#' class='remove_field'>Remove</a>" +
          "<select name='type' class='type'></select>" +
          "</div>");
      }
    })
    // create a button by default
    .trigger('click')

  $(wrapper).on('click', ".remove_field", function(e) {
    e.preventDefault();
    $(this).parent('div').remove();
    x--;
  });

  $(wrapper).on('change', '.service', function(e) {
    e.preventDefault();
    var parent = $(this).val();
    switch (parent) {
      case 'Listy':
        list(listy, $(this).next().next());
        break;
      case 'Paczki':
        list(paczki, $(this).next().next());
        break;
      // TODO: add case for Wybierz
    }
  });

  function list(array_list, element) {
    $(element).html("");
    $(array_list).each(function(i) {
      $(element).append("<option value=" + array_list[i].value + ">" + array_list[i].display + "</option>");
    });
  }

});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class='input_fields_wrap'>
<button class='add_field_button'>Add more fields</button>

Answer 2

事件委托允许我们将单个事件侦听器附加到父元素，该元素将为匹配选择器的所有后代触发，无论这些后代现在是存在还是将来添加。参考：https://learn.jquery.com/events/event-delegation/

你需要做以下事。

print(file.read())
>>>b';"";""\r\n' <-- WRONG see file content at the top
print(file.readlines())
>>>[]

带有动态选项的JQuery动态选择字段

2 个答案:

溶液