Click here to Skip to main content
14,176,439 members
Rate this:
Please Sign up or sign in to vote.
I have this code below that allows me to move values from the Random Fruits Table to the Green Fruits Table by click on the row value. And the code is also able to move back the value i moved from Random Fruits Table back to the Green Fruits Table. The problem is that the code is only able to only execute this process once but i want it to be able to execute the process unlimited times is there any simple way to accomplish this any help would be greatly appreciated thanks!

What I have tried:

Here is my JSFiddle[^]
Updated 12-Jun-18 23:25pm

1 solution

Rate this: bad
Please Sign up or sign in to vote.

Solution 1


On click of row in Random Fruit table, you are appending new to Green Fruit table but your Jquery listens to event only for element which where created at time of page load. So you to change your script slightly to

function listener(obj) {
   $(document).ready(function() {
     $(document).on("click","#fruityid td",function() {
   ... Rest of code goes here

By using $(document).on("click","element",function(){}), elements are re-initialized on click or other events.
Member 13863747 13-Jun-18 5:52am
Thanks Chirag Sudra that worked but do you know why when ever i repeat the process of move the value back and forth there is blank spaces in between the row?
Chirag Sudra 13-Jun-18 6:00am
On $('body').on('click', '.new-green-fruit',)

you are using .detach() but this is just applied on text not on the whole row

try this

$('body').on('click', '', function() {
   data2 = this.innerHTML;
   k2 = Object.keys(obj).find(k => obj[k].indexOf(data2) >= 0)
   index2 = obj[k2].indexOf(data2);
   obj[k2].splice(index2, 1);
    var element2 = $(this).detach();
    $('#fruityid > tbody').append('<tr><td>' + element2.html() + '</td></tr>');

In above I'm 1st detach the element from Green fruit table and rest code is same
Member 13863747 13-Jun-18 6:07am
Wow thanks that worked really appreciate it!

This content, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)

  Print Answers RSS
Top Experts
Last 24hrsThis month

Advertise | Privacy | Cookies | Terms of Service
Web05 | 2.8.190525.1 | Last Updated 13 Jun 2018
Copyright © CodeProject, 1999-2019
All Rights Reserved.
Layout: fixed | fluid

CodeProject, 503-250 Ferrand Drive Toronto Ontario, M3C 3G8 Canada +1 416-849-8900 x 100