jQuery doesn't work on dynamically created items

Question

I save a text with Jquery/Ajax method. I use an edit-in-place script (Jeditable) which allows to edit text by clicking on it. Unfortunately, Jeditable script doesn't work on dynamically created items, it works only when I reload the page.

this is my script:

$(".edwa").editable("/edit.php", { 
indicator:"<img src='/images/loading.gif'>",
width:439,
height:90,
loadurl:"/load.php",
type:"textarea",
onblur:"submit"
});

In a similar situation I fixed the problem by adding "$(document.body)" to the script but in this case I don't know what will be the correct syntax to add "$(document.body)". Any ideas or any other suggestions to solve the problem?

Answer 1

after a partail upload happens, you have to recall javaScript functions again to apply them to new created elements.

$(document).ready() only executes for full page load;

maybe this solve your problem :

<script type="text/javascript">   function pageLoad() {
               $(".edwa").editable("/edit.php", { 
                  indicator:"<img src='/images/loading.gif'>",
                  width:439,
                  height:90,
                  loadurl:"/load.php",
                  type:"textarea",
                  onblur:"submit"
               });
             }
</script>

and you have to call pageLoad() function each time you do a partial update using ajax.