asked on

Jquery - need help converting a small function from an older JQuery version.

I'm using a script to dynamically add rows to a table in a form. I like this particular solution because it has the 'Add Row' button at the bottom row, whereas most code I've seen has it at the top. That said, as written, the code won't work with the current jQuery libraries as it uses the .live method to do it's thing.

As I understand it, .live is deprecated and the fix is to change each instance of .live to .on - which works, but with a wrinkle I can't sort out. The original script may be seen in the following fiddle - jsfiddle.net/43rdworld/fvpuz4dr/.

The updated script is at jsfiddle.net/43rdworld/tte20r64/. Changing instances of .live to .on will allow me to add the first row as before, but nothing after that first row. I can add rows by clicking the Delete button, but can't delete anything. So it's a bit backward and I don't now what to do with it to fix it.

As always, thanks in advance for any assistance on this.

zephyr_hex (Megan)

You need to scope the handler to something that contains the button -- because you are adding it multiple times. Otherwise, "on" will only bind the event to the first occurrence (i.e. the first button that is added). You want the event to bind to all buttons that are added, so scope the event to the table, and specify which class it should "watch" for.

$('table').on('click', '.add',function(){

Open in new window

Here is an updated version of your Fiddle : https://jsfiddle.net/zephyr_hex/kdqbLcvp/1/

zephyr_hex (Megan)

Also, you need to remove the id from the price input. It's invalid HTML to have more than one element with the same id.

ASKER CERTIFIED SOLUTION

zephyr_hex (Megan)

membership

This solution is only available to members.

To access this solution, you must be a member of Experts Exchange.

Start Free Trial

saabStory

ASKER

Many thanks - just what I needed. But, I think the best practices will prove more valuable long term. I always want to do things the right way and it's often hard to sort that out online.