I have a form that I am using in a dialog modal box. This form is submitted via AJAX to a backend PHP script that inserts a record into the database.
Next the item that has been inserted into the database (a list of tasks) that task is added to the end of an unordered lists. I also have this unordered list setup so I can drag and drop the list items to sort them. Once dropped, again, a script updates the database. Lastly, I have an inplace editor setup so I can easily edit the contents of each task. When I click on my link to open the dialog box, once the form is saved, a 'template' task is copied and modified with the contents from the form. Everything works perfectly except after I add new tasks, they are not editable until I reload the page. I thought using live() would fix this, but it does not. Below is my code for this dialog box. I am not superb with jQuery so if you see things that look very wrong or have a better way to complete this task, please let me know. Thank you! $('.task_add').live('click', function(e) { e.preventDefault(); var targetUrl = $(this).attr('href'); // Clear values $('#name').val(''); $('#description').val(''); $('#url').val(''); $('#dialog_task_add').dialog({ autoOpen : false, bgiframe : true, draggable : false, modal : true, resizable : false, width : 'auto', buttons: { 'Save': function() { $.ajax({ type : 'POST', url : '../tasks/add.php', data : $([]).add('#name').add('#description').add ('#url'), success : function (response) { if (response == 'SUCCESS') { $('#dialog_task_add').dialog('close'); // Update the various values $('#name-TASKID').text($('#name').val()); $('#description-TASKID').text($('#description').val()); $('#url-TASKID').text($('#url').val()); // Rename the IDs // Not yet implemented // Show the created item $('#task_TASKID').clone().appendTo('.tasks').slideDown (); } else { // Alert in a better way once other portions of code are complete alert('OH NO!'); }; }, }); }, 'Cancel': function() { $(this).dialog('close'); }, } }); $('#dialog_task_add').dialog('open'); });