Как заставить функцию работать только с каждым клонированным div отдельно, а не с orginal - PullRequest
Новая
       11

Как заставить функцию работать только с каждым клонированным div отдельно, а не с orginal

0 голосов
/ 04 октября 2018

Мне нужно запустить функцию jquery при раскрывающемся списке изменений, но когда я клонирую элемент div и раскрывающийся список изменений клонированного элемента, эффект возникает в первом div. 

$(document).on('change', '#extrabed', function() {
  var value2 = $(this).val();
  var toAppend2 = '';
  var $container2 = $(this).siblings('#container2')

  switch (value2) {
    case 'No':
      toAppend2 = (function() {
        $("#extbed").hide();
      });
      $container2.html(toAppend2);
      return;
      break;

    case 'Yes':
      toAppend2 = (function() {
        $("#extbed").show();
      });
      $container2.html(toAppend2);
      return;
      break;

    default:
      return;
  }
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="container2">

  <div id="container2">
    <div id='extbed' style='display: none;'>
      <input name='fnameextrabed[]' id='fnameextrabed' type='text' class='stretch' placeholder='First Name' size='15' maxlength='30'>
      <input name='lnameextrabed[]' id='lnameextrabed' type='text' class='stretch' placeholder='Last Name' size='15' maxlength='30'>
    </div>
  </div>

demo

Кроме того, после клонирования новый div получает значения из исходного.Как я могу сбросить его?

Ответы [ 3 ]

0 голосов
/ 04 октября 2018

Вам не нужно устанавливать html .container2 при каждом нажатии. Вместо этого вы можете просто показать или скрыть #extbed. 

$(document).ready(function() {
  var genroomid = 2; // change 0 to the number you want to start with
  $(".add-row").click(function() {
	var $clone = $("ul.personal-details").first().clone();
	var $input = $clone.find('#roomid');
	$input.val(genroomid).attr('genroomid', +genroomid) // change fileid with any string you want 
  $clone.find("#extbed").css("display", "none");
	$clone.append("<button type='button' class='remove-row'>-</button>");
	$clone.insertBefore(".add-row");
	genroomid++; // increase id by 1
  });

  $(".cloned-removed-div").on("click", ".remove-row", function() {
    $(this).parent().remove();
    genroomid--;						  
  });
  		/*var x =(function(){
		
		$("#extbed").hide();
		$("#divvisextbed").val('0');
		});
	
	var y =(function(){
			$("#extbed").show();
			$("#divvisextbed").val('1');
			
		});*/
		
  	// code of display guest info of extra bed
  	$(document).on('change', '#extrabed', function() {
			var value2 = $(this).val();
			var toAppend2 = '';
			var $container2 = $(this).siblings('#container2')
    switch (value2) {
      case 'No':
        //toAppend2 = $container2.html(toAppend2);
		//toAppend2 = x;
    
		$($container2).find("#extbed").hide();
		$($container2).find("#divvisextbed").val('0');
		/*
		$(function(){
		$("#prefixextrabed").prop('required',false);
		$("#fnameextrabed").prop('required',false);
		$("#lnameextrabed").prop('required',false);
		$("#nationalityextrabed").prop('required',false);
		
		});
		*/
		//$container2.html(toAppend2);
		
        return;
        break;

      case 'Yes':
        //toAppend2 = blkofcod1ext + blkofcod2ext + blkofcod3ext;
		//toAppend2 = y;
    	$($container2).find("#extbed").show();
			 $($container2).find("#divvisextbed").val('1');
		
		/*
		$(function(){
		$("#prefixextrabed").prop('required',true);
		$("#fnameextrabed").prop('required',true);
		$("#lnameextrabed").prop('required',true);
		$("#nationalityextrabed").prop('required',true);
		
		});
		*/
		//$container2.html(toAppend2);
        return;
        break;

      default:
        //toAppend2 = $container2.html(toAppend2);
        return;
    }
  });
  
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form name="form_reservations" method="post" action="2loopadd.php">
<div class="cloned-removed-div">
<ul class="personal-details">
<table class="stretch" border="1">
<tr>
<td>
  <label for="extrabed">Extra Bed
                <select class="stretch"  name="extrabed[]" id="extrabed" required="required">
                	<option value="" disabled selected hidden>Extra Bed</option>
					<option value="No">No</option>
					<option value="Yes">Yes</option>
				</select>
                <div id="container2">
				
				<div id='extbed' style='display: none;'>
				<input name='divvisextbed[]' id='divvisextbed' type='hidden' value='0'>
				<select class='stretch' name='prefixextrabed[]' id='prefixextrabed'>
					<option value='Mr'>Mr</option>
					<option value='Ms'>Ms</option>
					<option value='Child'>Child</option>
					<option value='Infant'>Infant</option>
				</select>
				<input name='fnameextrabed[]' id='fnameextrabed' type='text' class='stretch' placeholder='First Name' size='15'  maxlength='30'  >
				<input name='lnameextrabed[]' id='lnameextrabed' type='text' class='stretch' placeholder='Last Name' size='15' maxlength='30'   >
				<input name='nationalityextrabed[]' id='nationalityextrabed' type='text' placeholder='Nationality' class='stretch' size='15' maxlength='30'  >
				</div>
				
				</div></label>
</td>
</tr>


</table>
         
       
       </ul>
        <button type="button" class="add-row" >+ New Client</button>
       <table width="25%" border="0"> <tr> <input type="submit" name="Submit" value="Insert"></tr></table>
      </div>
</form>

Вы также можете проверить это здесь ..

0 голосов
/ 04 октября 2018

Все ответы до сих пор не затрагивают вторую часть вопроса и не сбрасывают подэлементы, поэтому мы идем ... 

$(document).ready(function() {
  var genroomid = 2;
  $(".add-row").click(function() {
    var $clone = $("ul.personal-details").first().clone();
    var $input = $clone.find('#roomid');
    $input.val(genroomid).attr('genroomid', +genroomid)
    // Reset the values
    $clone.find('#extbed').hide().find('input').val('');
    $clone.append("<button type='button' class='remove-row'>-</button>");
    $clone.insertBefore(".add-row");
    genroomid++;
  });

  $(".cloned-removed-div").on("click", ".remove-row", function() {
    $(this).parent().remove();
    genroomid--;
  });

  // Limit the id search to the element receiving the event
  var x = (function() {

    $("#extbed", this).hide();
    $("#divvisextbed", this).val('0');
  });


  var y = (function() {
    $("#extbed", this).show();
    $("#divvisextbed", this).val('1');

  });

  // code of display guest info of extra bed
  $(document).on('change', '#extrabed', function() {
    var value2 = $(this).val();
    var toAppend2 = '';
    var $container2 = $(this).siblings('#container2')

    switch (value2) {
      case 'No':

        toAppend2 = x;
        $container2.html(toAppend2);

        return;
        break;

      case 'Yes':
        toAppend2 = y;

        $container2.html(toAppend2);
        return;
        break;

      default:
        //toAppend2 = $container2.html(toAppend2);
        return;
    }
  });

});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form name="form_reservations" method="post" action="2loopadd.php">
  <div class="cloned-removed-div">
    <ul class="personal-details">
      <table class="stretch" border="1">
        <tr>
          <td>
            <label for="extrabed">Extra Bed</label>
            <select class="stretch" name="extrabed[]" id="extrabed" required="required">
              <option value="" disabled selected hidden>Extra Bed</option>
              <option value="No">No</option>
              <option value="Yes">Yes</option>
            </select>
            <div id="container2">
              <div id='extbed' style='display: none;'>
                <input name='divvisextbed[]' id='divvisextbed' type='hidden' value='0'>
                <select class='stretch' name='prefixextrabed[]' id='prefixextrabed'>
                  <option value='Mr'>Mr</option>
                  <option value='Ms'>Ms</option>
                  <option value='Child'>Child</option>
                  <option value='Infant'>Infant</option>
                </select>
                <input name='fnameextrabed[]' id='fnameextrabed' type='text' class='stretch' placeholder='First Name' size='15' maxlength='30'>
                <input name='lnameextrabed[]' id='lnameextrabed' type='text' class='stretch' placeholder='Last Name' size='15' maxlength='30'>
                <input name='nationalityextrabed[]' id='nationalityextrabed' type='text' placeholder='Nationality' class='stretch' size='15' maxlength='30'>
              </div>
            </div>
            </label>
          </td>
        </tr>
      </table>
    </ul>
    <button type="button" class="add-row">+ New Client</button>
    <table width="25%" border="0">
      <tr>
        <input type="submit" name="Submit" value="Insert">
      </tr>
    </table>
  </div>
</form>
0 голосов
/ 04 октября 2018

Рабочая скрипка .

Вам нужно использовать классы вместо id, так как при клонировании элементов, которые приведут вас к дублирующим идентификаторам, чтоделает ваш HTML-код недействительным.

Поэтому, когда вы меняете идентификаторы по классам, вы должны передать класс extbed в функцию x/y, поскольку, если вы будете использовать .extbed непосредственно в качестве селектора, он выберетвсе элементы этого класса, которые будут вызывать скрытие всех клонированных и оригинальных экземпляров одновременно.

ПРИМЕЧАНИЕ: Скрыть часть .extbed в клонированном экземпляре, используя: 

$clone.find('.extbed').hide().find('input').val('');


$(document).ready(function() {
  var genroomid = 2; // change 0 to the number you want to start with

  $(".add-row").click(function() {
    var $clone = $("ul.personal-details").first().clone();
    var $input = $clone.find('#roomid');
    $input.val(genroomid).attr('genroomid', +genroomid) // change fileid with any string you want 
    $clone.find('.extbed').hide().find('input').val('');
    $clone.append("<button type='button' class='remove-row'>-</button>");
    $clone.insertBefore(".add-row");
    genroomid++; // increase id by 1
  });

  $(".cloned-removed-div").on("click", ".remove-row", function() {
    $(this).parent().remove();
    genroomid--;
  });

  var x = (function(extbed) {
    extbed.hide();
    $(".divvisextbed").val('0');
  });

  var y = (function(extbed) {
    extbed.show();
    $(".divvisextbed").val('1');
  });

  // code of display guest info of extra bed
  $(document).on('change', '.extrabed', function() {
    var value2 = $(this).val();
    var toAppend2 = '';
    var $container2 = $(this).siblings('.container2');
    var extbed = $container2.find(".extbed");

    switch (value2) {
      case 'No':
        toAppend2 = x(extbed);
        $container2.html(toAppend2);

        return;
        break;
      case 'Yes':
        toAppend2 = y(extbed);
        $container2.html(toAppend2);
        return;
        break;
      default:
        return;
    }
  });

});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form name="form_reservations" method="post" action="2loopadd.php">
  <div class="cloned-removed-div">
    <ul class="personal-details">
      <table class="stretch" border="1">
        <tr>
          <td>
            <label for="extrabed">Extra Bed
                <select class="stretch extrabed"  name="extrabed[]" required="required">
                	<option value="" disabled selected hidden>Extra Bed</option>
                  <option value="No">No</option>
                  <option value="Yes">Yes</option>
                </select>
                <div class="container2">
				
                <div class='extbed' style='display: none;'>
                <input name='divvisextbed[]' class='divvisextbed' type='hidden' value='0'>
                <select class='stretch' name='prefixextrabed[]' id='prefixextrabed'>
                  <option value='Mr'>Mr</option>
                  <option value='Ms'>Ms</option>
                  <option value='Child'>Child</option>
                  <option value='Infant'>Infant</option>
                </select>
                <input name='fnameextrabed[]' id='fnameextrabed' type='text' class='stretch' placeholder='First Name' size='15'  maxlength='30'  >
                <input name='lnameextrabed[]' id='lnameextrabed' type='text' class='stretch' placeholder='Last Name' size='15' maxlength='30'   >
                <input name='nationalityextrabed[]' id='nationalityextrabed' type='text' placeholder='Nationality' class='stretch' size='15' maxlength='30'  >
                </div>

                </div></label>
          </td>
        </tr>
      </table>
    </ul>
    <button type="button" class="add-row">+ New Client</button>
  </div>
</form>
...