javascript - Second append doesn't work on jquery -

-

i have form , need append field many times required. if button click add field clicked div should appended. after first append (onload), div responses correctly second 1 on, not getting similar response div. here jsfiddle

if click on test button , alert first div on adding div (by clicking click add field button) , button (test) doesn't work anymore second div onwards.

i tried clone() unable solve one. may not using correctly.

to replicate issue please follow steps::

  • click on click add field button add div
  • click on test button on second div onwards

please take , suggest. in advance.

you have use delegation $(document).on('click','.test',function(){

var count = 1;  	  $.fn.addclients = function(add){  	  var mydiv = '';    mydiv = '<div class="dataadd"><fieldset><legend>test: '+add+'</legend><b>test name :</b> <input type="text" id="ct'+add+'" name="cname" value="" style="width:250px" />'+              ' <button class="test" id="test" style="float:left;">test</button>'+  '<br>'+  '</fieldset></div>';  //$(".dataadd").clone().appendto('#registerform');          $('#registerform').append(mydiv);  }  $.fn.addclients(count);    $(document).on('click','#btn',function(){  		++count;  		$.fn.addclients(count);          return false;  });    $(document).on('click','.test',function(){  		alert("test");      return false;  });
.zend_form{     font-weight:bold;  	font-size:10px;  	width:358px;       float: left;        }  .dataadd{  	font-weight:bold;  	font-size:10px;  	width:358px;  	//border: 1px solid;  	margin-top: 15px;  	margin-bottom: 15px;  	//padding: 5px;  	//float:left;  }  .selectbox{  	margin-top: 15px;  	width:155px;   	height:100px;  }  .buttonc{  	background-color: #fff;  	width:145px;   	height:45px;  }  .selection_area{  	font-weight:bold;  	font-size:10px;  }  input {  	width: 200px;  }    dt {   width:50%; /* adjust width; make sure total of both 100% */     }  dd {   width:80%; /* adjust width; make sure total of both 100% */  }
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>  <form id="registerform" enctype="application/x-www-form-urlencoded" method="post" action=""><dl class="zend_form">  <dt id="firstname-label"><label for="firstname" class="required">first name:</label></dt>  <dd id="firstname-element">  <input type="text" name="firstname" id="firstname" value="" style="width:200px; float:left;" /></dd>  <dt id="middlename-label"><label for="middlename" class="optional">last name</label></dt>  <dd id="middlename-element">  <input type="text" name="middlename" id="middlename" value="" style="width:200px" /></dd>      </form>        <div style='display:table;background-color:#ccc;width:99%;padding:5px;'>  	        <button class='buttonc' name='btn_sub' id='btn' style='float:left;'>click add field</button>  	</div>


Comments

Post a Comment

Popular posts from this blog

javascript - gulp-nodemon - nodejs restart after file change - Error: listen EADDRINUSE events.js:85 -

-
i'm running nodejs 0.12.3 - gulp 3.10.8 , gulp-nodemon 2.0.3. gulpfile.js : gulp.task('serve', ['build'], function() { gulp.start('fb-flo'); nodemon({ script: paths.server, env: { 'node_env': 'development' }, // env: { 'node_env': 'production' }, execmap: { 'js': 'node_modules/babel/bin/babel-node --stage 1' //es7 cote server }, delay: '0ms', watch: ['src/shared/', 'src/server/'], ignore: ['src/shared/components'], tasks: function (changedfiles) { var tasks = []; changedfiles.foreach(function (file) { if (path.extname(file) === '.jsx' && !~tasks.indexof('bundlejs')) tasks.push('bundlejs'); if (path.extname(file) === '.less' && !~tasks.indexof('compileless')) tasks.push('compileless'); }); return tasks; } ...
Read more

Fatal Python error: Py_Initialize: unable to load the file system codec. ImportError: No module named 'encodings' -

-
i trying make simple python program opening list of webpages user manually download reports site. don't have previous experience preparing exe files.. , i'm in learning process python coding. of done on windows 7 x64 this python code: #!c:/python34/python.exe -u splinter import * import time import os import csv #---------------------------------- raporty = [] open('../raporty.csv', newline='') csvfile: contents = csv.reader(csvfile, delimiter=' ', quotechar='|') row in contents: r = ', '.join(row) r = r.replace(',','') raporty.append(r) #--not implemented yet zmienne = [] open('../zmienne.csv', newline='') csvfile: contents = csv.reader(csvfile, delimiter=' ', quotechar='|') row in contents: r = ', '.join(row) r = r.replace(',','') zmienne.append(r) print("start") browser = browser(...
Read more

javascript - oscilloscope of speaker input stops rendering after a few seconds -

-
the following script reads audio user's microphone , renders oscilloscope on html canvas. the source taken example of mozilla developer network: visualizations web audio api and here fiddle: http://jsfiddle.net/b7j8pktp/ mozgetusermedia (note: code has no fork mechanism different browsers: works firefox) it works fine few seconds , stops rendering. whereas works totally stable: http://mdn.github.io/voice-change-o-matic/ the problem can reduced following code. microphone activation icon (next the address bar in firefox) disappears after 5 seconds: navigator.mozgetusermedia({audio: true}, function() {}, function() {} ); ( http://jsfiddle.net/b7j8pktp/2/ ) this known bug in firefox. take stream getusermedia call , hook window so: navigator.mozgetusermedia({audio: true}, function(stream) { window.stream = stream; // rest of code }, function err() { // handle error }); hopefully can fixed soon. problem we're f...
Read more