Insertafter - Find - On() -- Not Working

i think, i have all set, but it is still not working - i am appending new html element input with X delete sign. if i click on that newly added X sign, the newly added input should

Solution 1:

The .find() function looks for elements that are inside the current set of matched elements, but doesn't include those matched elements. Your <a class="del"> element is part of the set of matched elements so won't be picked up.

Use .filter() instead:

....filter('.del').on('click', function() {...});

Solution 2:

Your .find() selector doesn't actually return anything. If you look at how jQuery processes your HTML string:

> $('<inputtype="file"name="bild[]"/><aclass="del">X</a><br/>')
[<inputtype=​"file" name=​"bild[]​">​, #text, <aclass=​"del">​X​</a>​, #text, <br>​]

You'll see that it's actually parsing each of those elements and text nodes as separate elements in a selector. .find() won't return anything, as it'll look only through the descendants of those elements, not the elements themselves:

> $('<inputtype="file"name="bild[]"/><aclass="del">X</a><br/>').find('.del')
[]

I'd start with something like this:

$('<input type="file" name="bild[]"/>').insertAfter('#more');
$('<a class="del">X</a>').insertAfter('#more').on('click', function(){
    alert('test');
});

$('<br/>').insertAfter('#more');

Or make a generic selector from the beginning that automatically handles click events, even for elements that don't exist yet:

$('#more').on('click', '.del', function() {
    alert('test');
});

Solution 3:

Try this

functionaddmore(){
        var element = $('<input type="file" name="bild[]"/> <a class="del">X</a> <br/>').insertAfter('#more');
        element.filter(".del").on('click', function(){
        alert('test');
       });
     }