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?

Run the code shown _after_ the dynamically added items have been added. — nnnnnn, Feb 27 '14 at 13:08
I'd try the `.find()` function, like `$(document).find('.target')` — Kevin Cittadini, Feb 27 '14 at 13:11
Simply using `.on('click', ...)` does not work in jQuery 1.7+ anymore. Check this for a solution http://stackoverflow.com/questions/15090942/jquery-on-method-not-working-on-dynamic-content — Sliq, Aug 15 '14 at 06:07

SalmanShariati · Accepted Answer · 2014-08-15T15:37:51.927

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.

edited Aug 15 '14 at 15:37

answered Feb 27 '14 at 13:16

SalmanShariati

3,873
4
27
46

Yes this works, but if I use it I need 2 copies of this function - my original and your pageLoad(); – user Feb 27 '14 at 14:30
1

no need to duplicate. just call it twice: $(document).ready(function(){ pageLoad(); }); – SalmanShariati Feb 27 '14 at 15:02
Java? JAVA ? You mixed up JavaScript with Java? There's a special place in hell for people who do this! :) – Sliq Aug 15 '14 at 06:01

score 0 · Answer 2 · answered Feb 27 '14 at 13:09

0

You should re-run the initialization of your plugin after dynamicaly loading your elements.

answered Feb 27 '14 at 13:09

Fernando Rybka

238
1
4
14

score 0 · Answer 3 · answered Feb 27 '14 at 13:10

0

Bind your editable function after creating your dynamic element

answered Feb 27 '14 at 13:10

Siddharth Nagar

392
2
13

jQuery doesn't work on dynamically created items

3 Answers3