Question

I am having trouble getting jquery to recognize an element that is created from a form change. I have it set up so when i select something a link is created with but when I add a click function to the created item nothing will happen. How can i make this work?

$(function() {

var i = $('#nav li').size() + 1;

$('a#add').click(function() {
    $('<li>' + i + '<a href="#" id="add">yes</a></li>').appendTo('ul');
    i++;
});

$('a#remove').click(function() {
    $('li:last').remove();
    i--;
});


});

html code

<ul id="nav">
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
</ul>
<a href="#" id="add">Add List Item</a><br/>
<a href="#" id="remove">Remove LI</a>

Answer 1

You need to use live to bind event handlers for dynamically created elements.
Your current code will create multiple html elements with same id which is not valid.
You can use class names instead to identify the src elements.

Try this:

$(function() {
    var i = $('#nav li').size() + 1;
    $('a.add').live("click", function() {
        $('<li>' + i + '<a href="#" class="add">yes</a></li>').appendTo('ul');
        i++;
    });

    $('a.remove').live("click", function() {
        $('li:last').remove();
        i--;
    });
});

html code

<ul id="nav">
            <li>1</li>
            <li>2</li>
            <li>3</li>
            <li>4</li>
</ul>
<a href="#" class="add">Add List Item</a><br/>
<a href="#" class="remove">Remove LI</a>