选择选项元素上的Click事件不适用于所有人

时间:2016-08-16 17:22:30

标签: javascript jquery

<div class= "button">
  <button id="More" type="submit">Add Parameter</button>
  <button id="Last" type="submit">Remove Parameter</button>
  <button class="Manual" id="Manual" type="submit">Manually Enter </button>
</div>
</br>
<!--WHERE USER WILL INPUT WHICH VARIABLES TO READ,-->
<form action="/output3" method="post" id="parameter" >
  <div2 id="Entire">
    <div class="fieldBlock1" id="Original">
      <fieldset style="width:215px;">
        <legend>Parameter</legend>
        <label >Parameter Name: </label>
        <select id="name"  name="name" required>
        </select> </br> </br>
        <label >Address: </label>
        <select class= "address" type=text id="address" name="address" style="width:14em;" required>
        </select> </br> </br>
        <label  >Data Size:    </label>  </br>
        <select   type=text id=sizeSelect name="size"style="width: 14em;" required>
        </select> </br> </br>
        <label >Write Data: </label> </br>
        <input  class="data" type=text id= "data" name="data" style="width: 14em;"> </input> </br></br>
      </fieldset>
    </div>
  </div2>

脚本 -

  //PUTTING A CAP ON PARAMETERS TO 10, CAN CHANGE CAP
  $('#More').on('click', function(){
    if (count==11) {

    }
    else {
      //WILL APPEND THIS IF ADD PARAMETERS IS CLICKED
      $("#Entire").append("<div class='fieldBlock' id='div'><fieldset><legend>Parameter</legend><label >Parameter Name: </label><select  class= 'name' id='name'  name='name' required></select></br></br><label >Address: </label><select  class= 'address' type=text id='address'  name='address' required></select></br></br><label  >Data Size: </label> </br><select  class= 'size' type=text id='sizeSelect' name='size' required></select> </br> </br><label >Write Data: </label> </br><input  type=text id='data'  name='data' class='data' style='width: 14em;'></br></br></fieldset></div>");
      count++;
    }
  });
  if (file && file.length) {
    //FILE IS SPLIT BY COMMAS
    results = file.split(",");
    //WILL RESET OPTIONS IF NEW FILE IS UPLOADED
    $('select').children().remove();

    //ITERATE THROUGH THE FILE TO PUT PROPER PARTS IN SELECT OPTIONS
    //IF FILE IS FORMATTED DIFFERENTLY THEN THIS PART WILL HAVE TO CHANGE
    for (var i = 1; i < results.length; i=i+8) {
      if(typeof results[i+6] !== 'undefined') {
        $("select[name='name']").each(function() {
          $(this).append("<option val='"+ results[i+6] +"' address='"+ results[i] +"' sizeSelect='"+ results[i+1] +"'>" + results[i+6] + "</option>");
        });
      }
      if(typeof results[i] !== 'undefined') {
        $("select[name='address']").each(function() {
          $(this).append("<option val=''"+ results[i] +"''>" + results[i] + "</option>");
        });
      }
      if(typeof results[i+1] !== 'undefined') {
        $("select[name='size']").each(function() {
          $(this).append("<option val=''"+ results[i+1] +"''>" + results[i+1] + "</option>");
        });
      }
    }
  }
}

//TODO----- WHEN THE NAME OF PARAMETER IS CHANGED, THE ADDRESS AND SIZE SELECT IS ALSO CHANGED. DOES NOT WORK WITH APPENDED PARAMTERS..
$(function () {
  $("select[name='name']").change(function() {
      var optionSelected = $(this).find('option:selected');
      console.log($(this).val());
      $("#address").val(optionSelected.attr('address'));
      $("#size").val(optionSelected.attr('sizeSelect'));
  });
});

我有一个用户上传到选择选项的文件,效果很好。我希望用户选择参数的名称,地址和数据大小会自动更改。这适用于第一个字段集,但不适用于按下更多按钮时附加的字段集。我不明白为什么它对附加部分不起作用。例如,当我按下添加参数按钮,并更改第一个参数的参数名称时,它会正确更改地址和大小。但是,当我尝试更改附加的字段集时,地址和大小不会更改。

0 个答案:

没有答案