Jquery can't use clone on appended html

Question

Im using JQuery to insert HTML code into a webpage

<div class="title-OthProb-outer">    
        <input type="button" class="title-add-non-standard-issue" value="Add a Non Standard Problem" />
</div>

Jquery:

var titleString = '<div class="title-OthProb-wrap title-nonStand1"><h3>Non Standard   Problems</h3><!-- redacted for readability! --></div><input type="button" class="title-add-another" value="+" /><br>';

$('div[class^=title-OthProb-wrap]').hide();
$('input[class^=title-add-another]').hide();
$(function() {
    $('.title-add-non-standard-issue').on('click', function() {
    $('input[class^=title-add-non-standard-issue]').hide();
       var that = this;
       var elem = $(that).closest('.title-OthProb-outer').append(titleString);
       var elem = $(that).closest('.title-OthProb-outer').find('.title-OthProb-wrap');
       $(elem).fadeIn(500);
});

This works fine, however I want the facility to clone the html, I had it working when the html was all in the page, i.e. not generated by Jquery, however now clicking the 'title-add-another' button does nothing.

$(function() {
$('.title-add-another').click(function() {
    // Add non-standard problems
    var num     = $('.title-OthProb-wrap').length; // how many "duplicatable"  fields we currently have
    var newNum  = new Number(num + 1);      // the numeric ID of the new input field being added

    // create the new element via clone(), and manipulate it's ID using newNum value
    var newElem = $('.title-nonStand' + num).clone().attr('class', 'title-OthProb-wrap title-nonStand' + newNum);

    // insert the new element after the last "duplicatable" input field
    $('.title-nonStand' + num).after(newElem);         
    });
});

If I enter that into the console then the button works... How does Jquery deal with elements that don't exist until after the page has been loaded?

am I missing something or are you trying to clone a non-existing element? — scunliffe
– scunliffe, Commented Jun 21, 2013 at 13:14
Checking the pages event handlers shows that theres nothing set for the add-another button once its added. I'll look into delegation. — Funk247
– Funk247, Commented Jun 21, 2013 at 13:16
So this element $('.title-nonStand' + num) already exists when you try to clone it, right? — A. Wolff
– A. Wolff, Commented Jun 21, 2013 at 13:18

A. Wolff · Accepted Answer · 2013-06-21 13:14:20Z

2

You need to use delegation...

$(function () {
    $(document).on('click','.title-add-another',function () {
        // Add non-standard problems
        var num = $('.title-OthProb-wrap').length; // how many "duplicatable"  fields we currently have
        var newNum = new Number(num + 1); // the numeric ID of the new input field being added

        // create the new element via clone(), and manipulate it's ID using newNum value
        var newElem = $('.title-nonStand' + num).clone().attr('class', 'title-OthProb-wrap title-nonStand' + newNum);

        // insert the new element after the last "duplicatable" input field
        $('.title-nonStand' + num).after(newElem);
    });
});

answered Jun 21, 2013 at 13:14

A. Wolff

74.4k9 gold badges98 silver badges158 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

A. Wolff Over a year ago

but you should not use document but instead the closest static container of '.title-add-another' elements, it's better

Collectives™ on Stack Overflow

Jquery can't use clone on appended html

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related