Question

i am trying to get the value of an input box from a list. i can get this to work with html like this..

<div id='numbs'>
    <input id='1'>enter value
    <input id='2'>enter value
</div>

but i cant get this to work if the inputs are in a list.
this is my code. thanks for any help. im very new to this so if any logic is jacked up please let me know.

var lastl = parseInt($("input:last").attr('id'));

$("input").live("click", function() {
    if (this.id == lastl && ($(this).prev('input').attr('value') > 0)) {
        lastl = lastl + 1;
        $('#numbs').append('<input id=' + (lastl) + '> enter value');
   }
});

jsfiddle

edit: i want to be able to make my html in this format

<ul id='numbs'>
    <li><input id='1'>enter value</li>
    <li><input id='2'>enter value</li>
</ul>

Answer 1

Looks like you’re just trying to add a new <input> when they click on the last one in the list.

There are a couple things to be aware of:

1. Use on instead of live or delegate, if you have to use an older jQuery then prefer delegate over live.
2. You probably want to use a focus event instead of a click event. Some people know how to use the keyboard and some have to use the keyboard; besides, focus seems to be a better fit for your intent.
3. Some browsers have issues with all numeric id attributes so it is best not to use them.
4. You don’t need to know the id of the previous item, you can figure out the next one based on the total number of <input> elements in play.

I’d use something like this:

$('#numbs').on('focus', 'input', function() {
    var $inputs = $('#numbs').find('input');
    if($inputs.index(this) == $inputs.length - 1) {
        var input = '<input id="input-'
                  + $inputs.length
                  + '">';
        $('#numbs').append('<li>' + input + '</li>');
    }
});​

You want to take action when they hit the last <input> inside the <ul> so say exactly that using index:

if($inputs.index(this) == $inputs.length - 1)

Demo: http://jsfiddle.net/ambiguous/L2MDa/