dynamically adding fields and content in jQuery

I'm trying to add fields dynamically to a web page so that a user can enter in additional amenities to a form. By clicking on the add amenity button I can add the fields just fine. However I cannot manage to get the values out of the input fields dynamically. The objective is to display what they type after they leave the field (using (':text').blur(myFunction);). This works for every other field I've used it on but for some reason I can't get the value to dynamically pull after I leave an 'amenity' field.

$('#new_amenity').on('click', function (event) {

  amenity++;
  $(this).prev().after('<br/><input type="text" value="" class="' + amenity + '" placeholder="Amenity" id="amenity" />');


  event.preventDefault();

});

Below is the code that I've tried to use to assign to the array.

//inside myfunction();
for(var i=1; $('#amenity').hasClass('.' + i);i++){
     amenities[i]=$('.'+i).val();   
}

//outside of function
$(":text").blur(myfunction);

Answers


You need to use event delegation for dynamic elements.

$('body').on('change', 'input', myfunction);

The hasClass function only expects the name, it's not the same as the usual selector. It does not need the period in front.

for(var i=1; $('#amenity').hasClass(i);i++){
     amenities[i]=$('.'+i).val();   
}

I have added a jsfiddle http://jsfiddle.net/fjCx7/3/ that may help you.

You have a lot going on here. first off you should not be putting the same ID on multiple things(bad practice)

your on blur event only gets bound on document load, you need something that will run dynamically.

$('#container').on('blur', '.otherClass', myfunction);

instead of looping over the elements using a for loop, give it a known class before hand that way you can just do an each over them

$('#container .otherClass').each(function(idx, item){
    amenities.push($(item));
});

Hopefully this will help you.

Also knockout is very good at doing stuff like this for you so you don't have to do it yourself.


Presuming you're running this on page load/document ready:

//outside of function
$(":text").blur(myfunction);

any new items you add aren't getting myFunction tied to the blur event - only the ones that existed on page load get the binding. Like the others said, you'll need to use event delegation or event bubbling.

HTML

<form id="amenities">
    <fieldset class="amenities">

    </fieldset>
    <button id="new_amenity">Add Amenity</button>
</form>    

JS

$('#new_amenity').on('click', function (event) {

    var count = $('.amenities').find('input').length;
    var amenity = '<br/><input type="text" value="" class="amenity-' + count + '" placeholder="Amenity" id="amenity" />';

    $('.amenities').append(amenity);

  event.preventDefault();

});

function myfunction(){
    //blah
}

$(".amenities").on('blur', 'input', myfunction);

Need Your Help

Read and Append the specific content

python file append

Subsequent to my previous question what if I want to append line. In that case others block are also specified in output file.

Why does curl blank out my output file upon completion?

curl

I'm trying to do: curl https://www.biblegateway.com/passage/?search=Hebrews%202:17-18&amp;version=ESV -o test.out