Dialog not opening on click on a td

Dialog not opening on click on a td

Hi people,

I'm developing a little card game in javascript. In my game, there is a board where the player will be able to click to interact with the content of the board.
My board is a <table> with various cells classed with ID (id=Xcoord-Ycoord) which is generated with a script.
To interact with the game, I would like to use the Dialog widget to ask to the player which action he wants to do (depend of the case he clicks).
My problem is that there's no (obvious) errors in my script because everything is working but when I click on a cell, the widget doesn't appear (it just remains hided on the page). I think it's my event "click" which is bad-made but I don't know how to fix. Could you help me ?
Here's my HTML Code :
  1. <!DOCTYPE html>
    <html>
        <head>
            <title>Heroes</title>
            <link rel="stylesheet" type="text/css" href="css/style.css" />
            <link rel="stylesheet" type="text/css" href="css/ui-lightness/jquery-ui-1.10.4.custom.css" />
            <link rel="stylesheet" type="text/css" href="css/ui-lightness/jquery-ui-1.10.4.custom.min.css" />
            <script type="text/javascript" src="js/jquery-1.10.2.js"></script>
            <script type="text/javascript" src="js/jquery-ui-1.10.4.custom.min.js"></script>
            <script type="text/javascript" src="js/jquery-ui-1.10.4.custom.js"></script>
            <script type="text/javascript" src="js/heros.js"></script>
            <script type="text/javascript" src="js/plateau.js"></script>
            <script type="text/javascript" src="js/tour.js"></script>
            <script type="text/javascript" src="js/tirage.js"></script>
            <script type="text/javascript" src="js/divers.js"></script>
        </head>
        <body>
           
            <input type="button" value="function" onclick="creationHerosAI()"/>
           
            <div id="formulaire">
            <p>Bienvenue sur le jeu Heroes</p>
           
            <form id="form1">
                <!--Nom du joueur-->
                <p>Le nom de votre h&eacute;ros</p>
                <p><input type="text" name="pseudo"/></p>
           
                <!--Sexe-->
                <p>Choisissez le sexe de votre h&eacute;ros</p>
                <select name="sexe" onchange="afficheChoixRace(this)">
                    <option value="rien" selected>Choisissez...</option>
                    <option value="Homme">Homme</option>
                    <option value="Femme">Femme</option>
                </select>

                <!--Race-->
               
                <div id="bloc_race_masc">
                <p>Choisissez la race de votre h&eacute;ros</p>
                <select name="race_m">
                    <option value="rien" selected>Choisissez...</option>
                    <option value="D&eacute;mon">D&eacute;mon</option>
                    <option value="&Eacute;l&eacute;mentaire d'&eacute;nergie">&Eacute;l&eacute;mentaire d'&eacute;nergie</option>
                    <option value="&Eacute;l&eacute;mentaire de glace">&Eacute;l&eacute;mentaire de glace</option>
                    <option value="&Eacute;l&eacute;mentaire de magie">&Eacute;l&eacute;mentaire de magie</option>
                    <option value="&Eacute;l&eacute;mentaire de magma">&Eacute;l&eacute;mentaire de magma</option>
                    <option value="Effrit">Effrit</option>
                    <option value="Elfe">Elfe</option>
                    <option value="G&eacute;nie">G&eacute;nie</option>
                    <option value="Gnoll">Gnoll</option>
                    <option value="Gobelin">Gobelin</option>
                    <option value="Homme-L&eacute;zard">Homme-L&eacute;zard</option>
                    <option value="Humain">Humain</option>
                    <option value="Liche">Liche</option>
                    <option value="Minotaure">Minotaure</option>
                    <option value="Nain">Nain</option>
                    <option value="Ogre">Ogre</option>
                    <option value="Troglodyte">Troglodyte</option>
                    <option value="Vampire">Vampire</option>
                </select>
                </div>
               
                <div id="bloc_race_fem">
                <p>Choisissez la race de votre h&eacute;ros</p>
                <select name="race_f">
                    <option value="rien" selected>Choisissez...</option>
                    <option value="D&eacute;mone">D&eacute;mone</option>
                    <option value="&Eacute;l&eacute;mentaire d'eau">&Eacute;l&eacute;mentaire d'eau</option>
                    <option value="&Eacute;l&eacute;mentaire d'esprit">&Eacute;l&eacute;mentaire d'esprit</option>
                    <option value="&Eacute;l&eacute;mentaire de feu">&Eacute;l&eacute;mentaire de feu</option>
                    <option value="&Eacute;l&eacute;mentaire de terre">&Eacute;l&eacute;mentaire de terre</option>
                    <option value="Elfe">Elfe</option>
                    <option value="Effrit">Effrit</option>
                    <option value="Femme-L&eacute;zard">Femme-L&eacute;zard</option>
                    <option value="Genie">G&eacute;nie</option>
                    <option value="Gnoll">Gnoll</option>
                    <option value="Gobeline">Gobeline</option>
                    <option value="Humaine">Humaine</option>
                    <option value="Liche">Liche</option>
                    <option value="Ogresse">Ogresse</option>
                    <option value="Vampire">Vampire</option>
                </select>
                </div>
           
                <!--Métier-->

                <div id="bloc_metier_m">
                <p>Choisissez le m&eacute;tier</p>
                <select name="metier_m">
                    <option value="rien" selected>Choisissez...</option>
                    <option value="Alchimiste">Alchimiste</option>
                    <option value="Apostat">Apostat</option>
                    <option value="Barbare">Barbare</option>
                    <option value="Belluaire">Belluaire</option>
                    <option value="Chevalier">Chevalier</option>
                    <option value="Chevalier de la mort">Chevalier de la mort</option>
                    <option value="Clerc">Clerc</option>
                    <option value="Druide">Druide</option>
                    <option value="&Eacute;l&eacute;mentaliste">&Eacute;l&eacute;mentaliste</option>
                    <option value="H&eacute;r&eacute;tique">H&eacute;r&eacute;tique</option>
                    <option value="Mage de guerre">Mage de guerre</option>
                    <option value="Magicien">Magicien</option>
                    <option value="Marcheur">Marcheur</option>
                    <option value="N&eacute;cromancien">N&eacute;cromancien</option>
                    <option value="R&ocirc;deur">R&ocirc;deur</option>
                    <option value="Seigneur de guerre">Seigneur de guerre</option>
                    <option value="Shaman">Shaman</option>
                </select>
                </div>
               
                <div id="bloc_metier_f">
                <p>Choisissez le m&eacute;tier</p>
                <select name="metier_f">
                    <option value="rien" selected>Choisissez...</option>
                    <option value="Alchimiste">Alchimiste</option>
                    <option value="Apostat">Apostat</option>
                    <option value="Barbare">Barbare</option>
                    <option value="Chevalier">Chevalier</option>
                    <option value="Chevalier de la mort">Chevalier de la mort</option>
                    <option value="Clerc">Clerc</option>
                    <option value="Druide">Druide</option>
                    <option value="&Eacute;l&eacute;mentaliste">&Eacute;l&eacute;mentaliste</option>
                    <option value="H&eacute;r&eacute;tique">H&eacute;r&eacute;tique</option>
                    <option value="Mage de guerre">Mage de guerre</option>
                    <option value="Magicienne">Magicienne</option>
                    <option value="Marcheuse">Marcheuse</option>
                    <option value="N&eacute;cromancienne">N&eacute;cromancienne</option>
                    <option value="R&ocirc;deuse">R&ocirc;deuse</option>
                    <option value="Seigneur de guerre">Seigneur de guerre</option>
                    <option value="Shaman">Shaman</option>
                    <option value="Sorci&egrave;re">Sorci&egrave;re</option>
                </select>
                </div>
               
                <input type="button" value="Oyez !" onclick="creationHeros()"/>
               
            </form>
            </div>
           
            <p id="recapitulatif"><!--Ici vient la phrase de recap du héros après création--></p>
           
            <div id="bouton_pret">
            <input type="button" value="Pr&ecirc;t(e) ?" onclick="demarreJeu()"/>
            </div>
           
            <div id="messages"><!--Ici viennent les messages--></div>
            <div id="plateau_jeu"><!--Ici vient le plateau de jeu--></div>
           
            <div id="menuCreature">
                <p>Invoquer la cr&eacute;ture</p><br>
                <p>Jeter</p>
            </div>
       
        </body>
    </html>



























































































































































Here's the script which makes the board game
  1. function demarreJeu() {
        //Construction du plateau//
        var plateau='<table>';
        var i;
       
        for (i=1;i<=24;i++) {
            plateau+="<tr>";
                for (j=1;j<=24;j++){
                    if (i==1 || i==2 || i==23 || i==24) {
                        if ((i==1 || i==24) && (j==10 || j==11 || j==12 || j==13 || j==14 || j==15)){
                        plateau+='<td class="case vert" title="" id="'+i+'-'+j+'"></td>';
                        }
                        else if(i==1 && j==8 || i==24 && j==17) {
                        plateau+='<td class="case gris" title="" id="'+i+'-'+j+'"></td>';
                        }
                        else {
                        plateau+='<td class="case jaune" title="" id="'+i+'-'+j+'"></td>';
                        }
                    }
                    else if(j==1 || j==2 || j==23 || j==24) {
                    plateau+='<td class="case jaune" title="" id="'+i+'-'+j+'"></td>';
                    }
                    else {
                    plateau+='<td class="case bleu" title="" id="'+i+'-'+j+'"></td>';   
                    }
                }
            plateau+="</tr>";
        }
        plateau+="</table>";
       
        document.getElementById("plateau_jeu").style.display="block";
        document.getElementById("plateau_jeu").innerHTML=plateau;
       
        document.getElementById("1-8").title=creationHerosAI();
        document.getElementById("24-17").title=creationHeros();
       
        //Tirage des premières cartes
       
        document.getElementById("1-10").title=tirageCarte();
        document.getElementById("1-10").className="case rouge";
        document.getElementById("1-11").title=tirageCarte();
        document.getElementById("1-11").className="case rouge";
        document.getElementById("1-12").title=tirageCarte();
        document.getElementById("1-12").className="case rouge";
        document.getElementById("1-13").title=tirageCarte();
        document.getElementById("1-13").className="case rouge";
        document.getElementById("1-14").title=tirageCarte();
        document.getElementById("1-14").className="case rouge";
        document.getElementById("1-15").title=tirageCarte();
        document.getElementById("1-15").className="case rouge";
        document.getElementById("24-10").title=tirageCarte();
        document.getElementById("24-10").className="case rouge";
        document.getElementById("24-11").title=tirageCarte();
        document.getElementById("24-11").className="case rouge";
        document.getElementById("24-12").title=tirageCarte();
        document.getElementById("24-12").className="case rouge";
        document.getElementById("24-13").title=tirageCarte();
        document.getElementById("24-13").className="case rouge";
        document.getElementById("24-14").title=tirageCarte();
        document.getElementById("24-14").className="case rouge";
        document.getElementById("24-15").title=tirageCarte();
        document.getElementById("24-15").className="case rouge";
       
        //On lance le premier tour
        tourJoueur();































































  2. }
Here's the script of the dialog
  1. $(function(){
       
        $(document).tooltip({
            show: {effect: "slideDown", delay: 100},
            position: {my: "bottom", at: "top"}
            });
           
        $( "#menuCreature" ).dialog({
            autoOpen: false,
            show: {effect: "blind",duration: 1000},
            hide: {effect: "explode",duration: 1000}
            });
           
        $( ".rouge" ).on({
            click:function(){$("#menuCreature").dialog("open");}
            });
    });
















Sorry, comments are in French...

Thanks by advance of your help.