jQuery .on? Manipulating DOM after Ajax

Question

Possible Duplicate:
Bind jQuery UI autocomplete using .live()

I can't seem to figure this out. I believe that I will have to either use .load() or .on() but I can't figure out how to make either of them work.

So I have a Table with 3 Rows. When the users fills out the 3 rows I want to provide them with more.

Once they fill out the last row this script is called.

function addNewRow(id)
{
    var qty = $('#qty' + id).val();
    if (qty > 0)
    {
        $('#quickaddtable').append('<?php echo createRow(($i+1)); ?>');
    }
}

The problem is that I am using autocomplete and for the newly created rows it's not working. I know that I need to reload DOM but I am just lost at how I can easily do this.

$(function(){  

    $(".id").autocomplete({ 
            //My Code
    });  
});

I am sure this is a simple answer however almost all the examples showed .on("click",...)

possible duplicate of [Bind jQuery UI autocomplete using .live()](http://stackoverflow.com/questions/4551230/bind-jquery-ui-autocomplete-using-live) <-- [also applies to `.on()`](http://stackoverflow.com/questions/4551230/bind-jquery-ui-autocomplete-using-live#comment13620250_4551230) — Naftali, Jul 09 '12 at 16:22
id is just an autoincrementing number to identify each row ... — user1287238, Jul 09 '12 at 16:35
Neal got it. I was looking at it all wrong. I needed to use .on with the autocomplete not the addNewRow function. So I changed this $j(function(){ //attach autocomplete $j(document).on("keyup.autocomplete", '.autocomplete', function(){ $j(this).autocomplete({ //My Code }); }); — user1287238, Jul 09 '12 at 17:37

score 0 · Accepted Answer · answered Jul 10 '12 at 00:26

Neal got it. I was looking at it all wrong.

I needed to use .on with the autocomplete not the addNewRow function.

So I changed this

$j(function(){  

    //attach autocomplete  
    $j(document).on("keyup.autocomplete", '.autocomplete', function(){
        $j(this).autocomplete({
                   //My Code
            });
    });

})

Thank you for all help. I spent hours looking at this and in Minutes you guys responded thank you again. Since Neil didn't post a answer is there any way I can give him credit?

Tin Can · Answer 2 · 2012-07-09T16:53:57.893

-1

The problem here is that when the $('.id') selector is used, the new rows don't exist yet. When you add more rows, the new elements that match '.id' aren't bound to the method you called earlier.

I would probably just rebind the after you insert rather than play around with binding to the document ($(document).on('event')). So it would be something like:

$('#quickaddtable').append( ... );
$('.id').autocomplete("destroy");
$('.id').autocomplete({ ... });

edited Jul 09 '12 at 16:53

answered Jul 09 '12 at 16:25

Tin Can

2,540
2
29
39

I am not looking to do a post. the jQuery monitors the number off rows and adds them accordingly. No post or ajax is required. I guess I could create and call a new page however .append works great at adding the rows. Just prevents the autocomplete from working – user1287238 Jul 09 '12 at 16:37
I see - so you have a PHP page, on your server, that contains this js. I made an assumption that this was a stand-alone script, in which you were trying to execute PHP from the client. I understand now. I'll update my answer. – Tin Can Jul 09 '12 at 16:46
Neal actually pegged it in his Comment. I was looking at it wrong. I was trying to do a on with the addRow function when I need to do it with the auto complete. now I just need to write his answer with on instead of live which is depreciated – user1287238 Jul 09 '12 at 17:15

jQuery .on? Manipulating DOM after Ajax

2 Answers2