Can't click an icone after modification by jQuery

Can't click an icone after modification by jQuery

Hello,

I have a table structure and in a <td> an image, a language flag icone. When one click on this icone, a jqueryUI popup form present some radio buttons with all languages avalaibles.

If the ok button is clicked, with ajax the database is updated and the new flag replace the old one. All that works fine.

But now, if I click this new flag it is not seen by jQuery. I read in the jQuery documentation that .on() would be the solution to this problem. But I can't understand how to use it.

The img balise has the class "clelangue", and the parent td the id "lang-XX" where XX is the id of the user concerned by the language change. The changeLanguage function does the database update with ajax and change the icone flag. The #changelanguage element is a div : <div id="changelanguage"></div>. #id_f1 is in my php form.

Is the line :
  1.  "$( 'td[id*="lang-' + conID + '"]' ).html( codeHtml );"
the problem ?

If somebody could show me the good way...

The interesting code :

  1. $( 'img.clelangue' ).on('click',(function () {
  2.         var dialog;
  3.         var conID;
  4.         // The ID is included in the parent td id
  5.         tdID = $(this).parent('td').attr('id');
  6.         if (/^lang-([0-9]+)$/.exec(tdID)) {
  7.                 conID = RegExp.$1;
  8.         }
  9.         else {
  10.                 console.log = 'nothing to select';
  11.         }
  12.         // We call the ajax form for the language choice
  13.         $( "#changelanguage" ).load( "http://www.mondomaine.com/admin/index.php?module=contact&action=ajax-formlang&id=" + conID );
  14.         dialog = $( "#changelanguage" ).dialog({
  15.                         autoOpen: true,
  16.                         height: 420,
  17.                         width: 340,
  18.                         modal: true,
  19.                         buttons: {
  20.                                 Fermer: function() {
  21.                                         dialog.dialog( "close" );
  22.                                 },
  23.                                 Enregistrer: function() {
  24.                                         changeLanguage();
  25.                                 }
  26.                         }
  27.         });
  28.         function changeLanguage() {
  29.                 // We update the database in php and get the new icone
  30.                 $.ajax({
  31.                         // the URL for the request
  32.                         url: "index.php",
  33.                         // the data to send (will be converted to a query string)
  34.                         data: {
  35.                                 id: conID,
  36.                                 module: 'contact',
  37.                                 action: 'ajax-change_language',
  38.                                 nw_lang: $( '#id_f1 input[name=nw_lang]:checked' ).attr( 'value' )
  39.                         },
  40.                         // I use POST
  41.                         type: "POST",
  42.                         // I expect back html code
  43.                         dataType : "html",
  44.                         // If the request succeeds
  45.                         // the response is passed to the function
  46.                         success: function( codeHtml ) {
  47.                                 $( 'td[id*="lang-' + conID + '"]' ).html( codeHtml );
  48.                                 dialog.dialog( 'close' );
  49.                         },
  50.                         // cif the request fails :
  51.                         error: function( xhr, status, errorThrown ) {
  52.                                 alert( "Désolé, il y a eu une erreur dans la mise à jour !" );
  53.                                 console.log( "Erreur: " + errorThrown );
  54.                                 console.log( "Statut: " + status );
  55.                                 console.dir( xhr );
  56.                         }
  57.                 });
  58.         };
  59. }));