JQuery add button inside -


i want have below: have text box(label survey qs), button(add choice), radiobox+ text buttons(add button) @ bottom. when click on add button, new div getting created (like survey2). when click on add choice(1st one), new radio+text box created.

however when click on add choice(second one), radio+text box not created. reason handlers not associated when create new objects. not able put live() method code so.

i novice. please help. in advance.

please find code:

<html> <head> <title>jquery add / remove textbox example</title>  <script type="text/javascript" src="jquery.js"></script>  <style type="text/css">     div{         padding:8px;     } </style>  </head>  <body>  <h1>jquery add / remove textbox example</h1>  <script type="text/javascript">  $(document).ready(function(){      var counter = 2;     var choicecounter=2;      $("#addbutton").click(function () {     //$("#addbutton").live("click",function () {     //alert("inside click function");     choicecounter=0;     if(counter>10){             alert("only 10 textboxes allow");             return false;     }         var newtextboxdiv = $(document.createelement('div'))          .attr("id", 'textboxdiv' + counter);      newtextboxdiv.after('<label>survey question '+ counter + ' : </label>' + '<input type="text" name="textbox' + counter +  '" id="textbox' + counter + '" value="" >');      newtextboxdiv.append('<label>survey question ' + counter + ' : </label>' + '<input type="text" name="textbox'  + counter + '" id="textbox' + counter + '" value="" /> <input type="button" value="add choice" id="addoption"> </br><input type="radio"> <input type="textbox" id="option1" ></br>');              $('#textboxesgroup').append(newtextboxdiv);         newtextboxdiv.appendto("#textboxesgroup");       counter++;      });        $("#addoption").click(function () {   // new add method     alert("inside option function");     if(choicecounter>10){             alert("only 10 textboxes allow");             return false;     }         var newtextboxdiv = $(document.createelement('div'))          .attr("id", 'textboxdiv' + choicecounter);      newtextboxdiv.after( '<br><input type="radio"> <input type="text" name="textbox' + choicecounter + '" id="option' + choicecounter + '" value="insert choice" >');       newtextboxdiv.append( '<br><input type="radio"> <input type="text" name="textbox' + choicecounter + '" id="option' + choicecounter + '" value="insert choice" />');                    $('#textboxesgroup').append(newtextboxdiv);        newtextboxdiv.appendto("#textboxesgroup");      choicecounter++;      });           $("#removebutton").click(function () {     if(counter==1){           alert("no more textbox remove");           return false;        }         counter--;          $("#textboxdiv" + counter).remove();       });       $("#getbuttonvalue").click(function () {      var msg = '';     for(i=1; i<counter; i++){       msg += "\n textbox #" + + " : " + $('#textbox' + i).val();     }           alert(msg);      });   }); </script> </head><body>  <div id='textboxesgroup'>     <div id="textboxdiv1">          <label>survey question 1: </label><input type='textbox' id='textbox1' >  <input type="button" value='add choice' id="addoption">         <br><input type="radio"> <input type='textbox' id='option1' ><br>         </div> </div> <input type='button' value='add button' id='addbutton'> <input type='button' value='remove button' id='removebutton'> <input type='button' value='get textbox value' id='getbuttonvalue'>  </body> </html>

try delegate event:

$("#textboxesgroup").on("click", "#addoption", function () {    // code }):

or can try

$("#textboxesgroup").delegate("#addoption", "click", function () {     // code }):

a little note

.on() ordinary binding used like

$(target).on(eventname, handlerfunction)

but delegate event (aka live) use like

$(container).on(eventname, target, handlerfunction)

here container point holder of target belong dom @ page load. container , target valid jquery selector.


Comments

Post a Comment

Popular posts from this blog

jquery - Invalid Assignment Left-Hand Side -

i trying assign class tag via jquery, resulting in error through firebug says "invalid assignment left-hand side" on fourth line below. <cfoutput> $('.pngfix a').each(function(index) { var hreflink = $(this).attr("href"); if (hreflink.tolowercase() = '../audio.cfm') { $(this).addclass('audioimg'); } }); </cfoutput> looking around online, looks syntax problem, don't seem see it... any tips? thanks if (hreflink.tolowercase() = '../audio.cfm') that attempts assign value, rather check equality. change = operator == .
Read more

java - Play! framework 2.0: How to display multiple image? -

i need display gallery of photos. here template: @(photos: list[photo]) @title = { <bold>gallery</bold> } @main(title,"photo"){ <ul class="thumbnails"> @for(photo <- photos) { <li class="span3"> <a href="#" class="thumbnail"> <img src="@photo.path" alt=""> </a> </li> } </ul> } and here controller method: public static result getphotos() { return ok(views.html.photo.gallery.render(photo.get())); } and here photo bean : @entity public class photo extends model { @id public long id; @required public string label; public string path; public photo(string path, string label) { this.path = path; this.label = label; } private static finder<long, photo> find = new finder<long, photo>( long.class, photo.class); public static list<phot...
Read more

gmail - Is there any documentation for read-only access to the Google Contacts API? -

i want read-only access user's google contacts. there stackoverflow member wanted this, , received following answer : yes, there is, use https://www.googleapis.com/auth/contacts.readonly scope , "view contacts". this exchange reference read-only access google contacts can find using google. simply using access token obtained attempt read usual google contacts api (i.e. https://www.google.com/m8/feeds ) fails insufficient permissions. similarly, using google contacts api on new target fails 404 errors (for example https://www.googleapis.com/auth/contacts.readonly/default/full ). is there documentation anywhere on how use api, or permissible way access google contacts api full read-write access?
Read more