-1

I have a problem with the "click" action on a new element created by a jQuery function, it doesn't work.

I created a JSFiddle to this link (JSFiddle), but it doesn't work perfectly because I can't call a Ajax request in JSFiddle.

I have these two buttons,

<input type="button" onclick="invia('SIC-034031','', 's');" value="AGGIUNGI" style="height: 20px; width: 110px; background-color: #A5EFC5 ; color: #000000; font-family: Arial,Helvetica,sans-serif; font-size: 12px; background-repeat: no-repeat; background-position: left center;" id="iscriviSIC-034031" class="pulsanteIscrizioni" name="xaggiorna"/>&nbsp;
<input type="button" onclick="invia('SIC-034031','R', 's');" value="RISERVA" style="height: 20px; width: 110px; background-color: #F00000; color: #FFFFFF; font-family: Arial,Helvetica,sans-serif; font-size: 12px; background-repeat: no-repeat; background-position: left center;" id="iscriviRSIC-034031" class="pulsanteIscrizioni" name="xaggiorna"/>

When you call the ajax function for the first time, button one answers with this output:

OK;I;SIC-034031

Button two is only used to erase. Button one creates.

<input id="iscriviSIC-034031" class="pulsanteIscrizioni" type="button" name="xaggiorna" style="height: 20px; width: 110px; background-color: #03F; color: #FFF; font-family: Arial,Helvetica,sans-serif; font-size: 12px;" value="TOGLI" onclick="invia('SIC-034031','');">

When I click this new button, the ajax function return this,

OK;C;SIC-034031;;

Button one goes away and button two comes back. Now there is where the problem is, if I click on the first button, everything works. If I click in the second button, it doesn't work.

Can you try to help me to find the problem, please?

Thanks ;)

MrGood
  • 545
  • 5
  • 21
Swim89
  • 290
  • 8
  • 28
  • I doubt anyone can help if you do not post your relevant code. You just put some html and we know nothing about your ajax calls and javascript. – Ozan Jan 20 '15 at 18:25
  • 2
    Events do not magically get added to new elements. http://stackoverflow.com/questions/203198/event-binding-on-dynamically-created-elements So you add new buttons and expect an event that was attached on document ready to apply to it? – epascarello Jan 20 '15 at 18:26
  • I put my code in JSFiddle link...I wrote it in my post... – Swim89 Jan 20 '15 at 23:02

1 Answers1

7

jQuery is only aware of the elements in the page at the time that it runs, so new elements added to the DOM are unrecognized by jQuery. To combat that use event delegation, bubbling events from newly added items up to a point in the DOM that was there when jQuery ran on page load. Many people use document as the place to catch the bubbled event, but it isn't necessary to go that high up the DOM tree. Ideally you should delegate to the nearest parent that exists at the time of page load.

$(".pulsanteIscrizioni").on("click", function()

is what you have now. Change it to - 

$(document).on("click", '.pulsanteIscrizioni',function()
Community
  • 1
  • 1
Jay Blanchard
  • 34,243
  • 16
  • 77
  • 119
  • Thanks! Is the perfect solution: I tried $(input).on("click", '.pulsanteIscrizioni',function() but doesn't work. Now, with "document" everything works! Thanks!! – Swim89 Jan 20 '15 at 23:02
  • 1
    Congrats on the 10k btw ;-) I believe a certain someone may have had something to do with that ;-) – Funk Forty Niner Jan 20 '15 at 23:26