Div based on selection not working, when new selection line was added-CodePudding

i want to create form when there will be possibility to add/remove additional selection rows, but all of this new selection should have possibility to show DIV depends on selected option.

Everything is working fine for first row which is loaded with page, DIV is showing input form, normal text or another selection (this one not need to show anything in additional DIV) based what we choosed. But for added rows nothing happens after selection.

Any idea how to fix it or use another solution?

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<div style="width:100%;">
Replace:
        <form>
            <div >
                <div >
                    <div id="row">
                        <div >
                            <select  name="test" id="type"><option>select one</option><option value="id">ID:</option><option value="client">Client:</option><option value="file">File:</option></select>&nbsp;&nbsp; with &nbsp;&nbsp;
                            <div id="values"></div>
                            <div  style="margin-left: 20px;">
                                 <button  id="DeleteRow" type="button">
                                     <i ></i>
                                     Delete row
                                 </button>
                             </div>
                        </div>
                    </div>

                    <div id="newinput"></div>
                    <br />
                    <button id="rowAdder" type="button" >
                        <span >
                        </span> ADD row
                    </button>
                </div>
            </div>
        </form>
    </div>

 $("#rowAdder").click(function () {
            newRowAdd =
            '<div id="row">'  
            '<div >'  
            '<br /><select  name="test" id="type"><option>select one</option><option value="id">ID:</option><option value="client">Client:</option><option value="file">File:</option></select>'  
            '&nbsp;&nbsp; with &nbsp;&nbsp;'  
            '                <div id="values"></div>'  
            '                <div  style="margin-left: 20px;">'  
            '                     <button '  
            '                         id="DeleteRow" type="button">'  
            '                         <i ></i>'  
            '                         Delete row' 
            '                     </button> </div>'  
            '</div> </div>';

            $('#newinput').append(newRowAdd);
        });

        $("body").on("click", "#DeleteRow", function () {
            $(this).parents("#row").remove();
        })

Example: http://jsfiddle.net/3th96bac/

CodePudding user response：

The main problem is that you are having multiple elements with the same Id. Id must be unique.

Second you'r $(".type").change(function() { will not get triggered by the newly added elements.

Demo

$(document).ready(function() {

  $(document).on("change", ".type", function() {
    var val = $(this).val();
    if (val == "id") {
      $(this).next(".values").html("<select><option>First option</option><option>Second Option</option></select>");
    } else if (val == "client") {
      $(this).next(".values").html("<input value='Example input' />");

    } else if (val == "file") {
      $(this).next(".values").html("normal text");
    }
  });
});

$("#rowAdder").click(function() {
  newRowAdd =
    '<div >'  
    '<div >'  
    '<br /><select  name="test" id=""><option>select one</option><option value="id">ID:</option><option value="client">Client:</option><option value="file">File:</option></select>'  
    '&nbsp;&nbsp; with &nbsp;&nbsp;'  
    '                <div ></div>'  
    '                <div  style="margin-left: 20px;">'  
    '                     <button '  
    '                         id="" type="button">'  
    '                         <i ></i>'  
    '                         Delete row'  
    '                     </button> </div>'  
    '</div> </div>';

  $('#newinput').append(newRowAdd);
});

$("body").on("click", ".DeleteRow", function() {
  $(this).closest(".row").remove();
})

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<div style="width:100%;">
  Replace:
  <form>
    <div >
      <div >
        <div >
          <div >
            <select  name="test" id="">
              <option>select one</option>
              <option value="id">ID:</option>
              <option value="client">Client:</option>
              <option value="file">File:</option>
            </select>&nbsp;&nbsp; with &nbsp;&nbsp;
            <div ></div>
            <div  style="margin-left: 20px;">
              <button  id="" type="button">
                                     <i ></i>
                                     Delete row
                                 </button>
            </div>
          </div>
        </div>

        <div id="newinput"></div>
        <br />
        <button id="rowAdder" type="button" >
                        <span >
                        </span> ADD row
                    </button>
      </div>
    </div>
  </form>
</div>

CodePudding user response：

Please check below working link for your question.

http://jsfiddle.net/kairavthakar2016/nkrqahpf/11/

Please modify your HTML and instead of ID please use the class and replace the jQuery with class name in the above mentioned example