Question

I have a jsfiddle where the user opens a grid and selects an option, after the user selects an option if they click on the “Add question” button, then it will display the option in a new table row.

As you can see in the new table row it shows the text box and the open grid link as well. I have done this because lets say you have added an option but then realise you have chosen the wrong option, I want the user to be able to click on the “Open Grid” link in whichever row is relevant and click on the option they prefer. So in other words I want the users to be able to select an option within a table row the exactly the same way as if they were choosing their options using the above feature before adding the option in a new row.

I am using the .on() function to do this but my problem is that if I try to open the grid in one of the outputted rows, it would not open the grid. So how can I get it so that the user can seelct an option from the table row like they do when selecting an option from the above feature.

My code is in jsfiddle, click here, if anyone does have an idea then feel free to use the fiddle to test your ideas.

Thank You

Answer 1

You need to replace

 $('.showGrid').on('click', function...

with

 $(document).on('click', '.showGrid', function...

to get .live()-like functionality. You also need to either change the .showGridRow class on your appended links to .showGrid, or make the following additional change:

 $(document).on('click', '.showGrid,.showGridRow', function...

This leaves the problem that the ‘grid’ is popping up in the same place no matter where you click. I solved this by adding the following line to your ‘show” code:

        $('#optionTypeTbl').css({
            left: $(this).position().left,
            top: $(this).position().top + 20
        });

http://jsfiddle.net/mblase75/f8cKm/15/