CODEWITHSUNDEEP
javascriptjquerydom
Victor
Victor

Reputation: 13

creating cascaded elements in JQuery

I've got the following assignment:

create a div with a button dynamically, and this in turn they should create another (div with button), so on.

Yet the following code does not work:

<div id="M-0">
    <div id="M-0C"></div>
    <input id="add_container" name="add_container" class="cua" type="button" value="Addition Container"  >
</div>

and the Jquery Code is:

$(document).ready(function() {
    $(".cua").live("click", function(e){
        var father = $(this).parent();          
        var id_new=father.attr('id')+'.M-';
        var number=0;
        while( $('#'+id_new+number).length ){
            number=number+1;
        }
        id_new=id_new+number;
        alert('here '+id_new);
        $('#'+father.attr('id')+'C').append('<div id="'+id_new+'"><div id="'+id_new+'C"></div><input id="add_container" name="add_container" class="cua" type="button" value="Addition Container" ></div>');
    });
});

A click on the first button works, but the next click on the newly created button is not working.

Upvotes: 1

Views: 195

Answers (2)

moonwave99
moonwave99

Reputation: 22820

Markup

<div id="parent">
  <div class="button"><button>Add More</button></div>
</div>

JS

var $parent = $('#parent');
var $button = $parent.find('.button');

$(document).on('click', '.button button', function(event){

    event.preventDefault();
    $parent.append($button.clone());

});

Fiddle

Upvotes: 0

bipen
bipen

Reputation: 36551

try using on()..

$(document).on('click','.cua',function(e){
   var father = $(this).parent();          
    var id_new=father.attr('id')+'.M-';
    var number=0;
   .....

});

fiddle here

Upvotes: 1

Related Questions