CODEWITHSUNDEEP
jquerycss
GoldenFingers
GoldenFingers

Reputation: 119

add More Lines in jQuery not work

I have a problem with jQuery. I want to make a dynamic Terms and Conditions Form with More Lines and More Lines in content condition

Look at this image : enter image description here

I can add more condition lines and add more condition content lines in one condition only

can you help me ?

Here is the source code : http://jsfiddle.net/gsgw0bby/1/

                    $(".addNewLine").on('click', function(){
                    //e.preventDefault();
                     var abc = $('.addNewLine:first')[0];
                     var LineCond_Number = abc.getAttribute('id');
                     // var xyz = abc.getAttribute("data-lat");
                     //
                    if(ii_id < max_LiensConditions)
                    {
                        ii_id++;
                        $(".conditions_"+LineCond_Number+"_"+ii_id).append('<input style="width: 95%;margin-right: 3px;margin-top: 4px;background-color: #FFF;border-right: 1px solid #DDD;" name="display_price[content_condition]['+LineCond_Number+']['+ii_id+']" class="" type="text" /><div class="conditions_'+LineCond_Number+'_'+(ii_id+1)+'"></div>'); //add input box
                    }
                    return false;
                });

Upvotes: 0

Views: 57

Answers (2)

iCollect.it Ltd
iCollect.it Ltd

Reputation: 93601

First problem:

As the elements are dynamic, you need to use delegated event handlers, attached to a non-changing ancestor element. document is the default if nothing else is closer/convenient:

  $(document).on("click", ".addNewLine", function(){

The second problem is you are then accessing the same element via a selector, rather than this

    var abc = $('.addNewLine:first')[0];  <<< WRONG!!!

Do this instead:

    var $abc = $(this);

You then get an id from the element:

    var LineCond_Number = abc.getAttribute('id');

which could become the jQuery equivalent:

    var LineCond_Number = $abc.attr('id');

After these issues I get a bit lost in your code :)

Upvotes: 1

Zander
Zander

Reputation: 1086

I have faced this problems several times, and I learned thanks to here that, when you create a new td with the button, it doesn't triggers unless you specify from where it comes.

For example:

$("table").on("click", ".addNewLine", function() {
    //Do stuff
});

Instead of $(".addNewLine").on("click", function() {});

Also check out, because I tried it and it adds it to the first td of new line.

Upvotes: 0

Related Questions