html - How to make radio buttons that show and hide inputs work within a jquery cloned div? -


i radio selection work within cloned div. div cloned indefinitely, each clone requires new selection.

how radio selection buttons within each div point items within div?

as stands now, selection clones when different items selected nothing happens.

please let me know if more information needed.

html:

<form> <div id="clonedform_1" class="clonedform">     <div class="addsomejazz">     <label name="btn1">selection 1         <input type="radio" name="select" class="btn1" value="selection 1" />     </label>     <label name="btn2">selection 2         <input type="radio" name="select" class="btn2" value="selection 2" />     </label>     <label name="btn3">selection 3         <input type="radio" name="select" class="btn3" value="selection 3" />     </label>     </div>     <br />     <div class="selection1 hidden" id="selection1_1">         <label name="text1" class="hideme">something thoughtful:             <input type="text" name="text1" class="hideme" />         </label>     </div>     <div class="selection2 hidden" id="selection2_1">         <label name="select1" class="hideme">select 1 of these:             <select class="hideme">                 <option>select this</option>                 <option>or this</option>                 <option>or maybe this</option>                 <option>do not select this</option>             </select>         </label>     </div>     <div class="selection2 hidden" id="selection3_1">         <label name="checkyboxy" class="hideme">what applies:             <input type="checkbox" name="thechecks" value="cool" class="hideme" />i cool             <input type="checkbox" name="thechecks" value="interesting" class="hideme" />i interesting             <input type="checkbox" name="thechecks" value="funny" class="hideme" />i funny</label>     </div> </div> <input type="button" id="cloneme" value="add entry" /> <input type="button" id="deleteme" value="get rid of last one" />

jquery:

$(document).ready(function () { $(function () {     $('#cloneme').click(function () {         var num = $('.clonedform').length,             newnum = new number(num + 1),             newelem = $('#clonedform_' + num).clone().attr('id', 'clonedform_' +         newnum).fadein('slow');         newelem.find('.selection1').attr('id', 'selection1_' + newnum);         newelem.find('.selection2').attr('id', 'selection2_' + newnum);         newelem.find('.selection3').attr('id', 'selection3_' + newnum);         newelem.find(":input[type='radio']").attr('name', 'select' + newnum);         newelem.find(".hideme").addclass('hidden');          $('#clonedform_' + num).after(newelem);         $('#deleteme').attr('disabled', false);     });     $('#deleteme').click(function () {         var num = $('.clonedform').length;         $('#clonedform_' + num).slideup('slow', function () {             $(this).remove();             if (num - 1 === 1) $('#deleteme').attr('disabled', true);         });     });      $('#deleteme').attr('disabled', true); });  $('.btn1').click(function () {     var num = $('.clonedform').length;      $('#selection1_' + num).show();     $('#selection2_' + num).hide();     $('#selection3_' + num).hide(); }); $('.btn2').click(function () {     var num = $('.clonedform').length;     $('#selection1_' + num).hide();     $('#selection2_' + num).show();     $('#selection3_' + num).hide(); }); $('.btn3').click(function () {     var num = $('.clonedform').length;     $('#selection1_' + num).hide();     $('#selection2_' + num).hide();     $('#selection3_' + num).show(); }); });

here link example set on fiddle: http://jsfiddle.net/katiekatie/pqd8s/

thanks!

the main problem event handlers. changed use event delegation , traversal functions find element hide , show. there few other small changes, , there still other optimizations done (for example, don't think dealing ids gaining anything).

http://jsfiddle.net/p9ykt/

here's important part:

$(document).on('click', '.btn1', function () {     var $container = $(this).closest('.clonedform');      $container.find('.selection1').show();     $container.find('.selection2').hide();     $container.find('.selection3').hide(); }); $(document).on('click', '.btn2', function () {     var $container = $(this).closest('.clonedform');      $container.find('.selection1').hide();     $container.find('.selection2').show();     $container.find('.selection3').hide(); }); $(document).on('click', '.btn3', function () {     var $container = $(this).closest('.clonedform');      $container.find('.selection1').hide();     $container.find('.selection2').hide();     $container.find('.selection3').show(); });

-

Comments

Post a Comment

Popular posts from this blog

php - regexp cyrillic filename not matches -

i take list of files php glob(."*.pdf") . files have cyrillic names. example: ООО «Рога и копыта» then load company names database , try find them in file names: preg_match("/$firm_name/ui", $file_name, $match); i have problem: firms if $firm_name visually similar $file_name , preg_match says there no match. mb_detect_encoding both variables return utf-8. there problem in file name, or maybe there encoding or something, can not understand, ask help. upd: $file_name='ООО «Рога и копыта»'; preg_match("/... .Рога и копыта./ui", $file_name, $match); as result, ОО «Рога и копыта» , 1 О missing
Read more

c# - OpenXML hanging while writing elements -

Image
i have program pulls data database, caches file , exports data multiple formats (excel, excel 2003, csv). i'm using openxml sdk 2.0 excel work. these export processes run in parallel (using parallel.foreach ), , amount of data can pretty large - e.g. csvs 800mb. during these larger exports, i've noticed writing of xml documents hang. instance, if have 8 exporting in parallel, @ point "pause". hang around same point: //this.writer openxmlwriter created worksheetpart. this.writer.writeelement(new cell() { cellvalue = new cellvalue(value), datatype = cellvalues.string }); when happens, pause debugger (vs2013 in case) , notice threads blocking around same portion of code - bit deeper in openxml sdk - stem call openxmlwriter.writeelement . i dug through source using justdecompile didn't find answers. appears there intermediary stream in use writing isolated storage , is, reason, blocking. underlying stream each of these filestream . here screenshot ...
Read more

sql - Select Query has unexpected multiple records (MS Access) -

i may tired, can't seem figure out happening. have 2 queries. query 1 has 10 fields. query 2 has 5 fields. fields 1 through 3 same in both queries. trying write select query , simple add field 5 query2 query1 result should query1 additional field (query2.field5). i join first 3 fields both queries , choose select records in query1 , in query2 match. don't know sql, use query designer. expect same number of records have query 1 instead have 3 times or more. can tell me doing wrong. tried reversing joins still seem same records. thanks in advance. here query: the fields in common divisionname , supplierid = vendorid , commodityname . select [part revenue exposed query p1].divisionname, [part revenue exposed query p1].commodityname, [part revenue exposed query p1].suppliername, [part revenue exposed query p1].partnumber, [part revenue exposed query p1].partdescription, [part revenue exposed query p1].bucode, ...
Read more