Problema con jquery imágenes no responden al onclick

Berman · #1 (**permalink**) 30/05/2018, 03:55

Buenas tengo un programa casi acabado pero no consigo solucionar un error.

Mi programa es una web en que se muestra un un puzzle. El tablero inicialmente está vació y las piezas se encuentran en un div a la derecha.

si seleccionas una ficha se introduce en un div de ficha seleccionada y después lo puedes poner en la casilla que quieras del tablero.

El problema es que si te equivocas al poner la ficha puedes hacer click encima de esta en el tablero y volvera al div donde se encuentran las fichas originalmente para ser seleccionadas. La cuestión es que cuando vuelven a ese div dejan de ser sancionables otra vez y no entiendo porque.

Os pongo tanto el html como el js, por si alguien ve el problema
Muchas Gracias.

Código HTML:

Ver original<!DOCTYPE html>
<html>
    <head>
        <title>Puzzle</title>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <link href="puzzle.css" rel="stylesheet" type="text/css"/>
        <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
        <script src="puzzle.js" type="text/javascript"></script>
    </head>
    <body>
        <div id="taulell">
            <div class="fitxa" id="fit1"></div>
            <div class="fitxa" id="fit2"></div>
            <div class="fitxa" id="fit3"></div>
            <div class="fitxa" id="fit4"></div>
            <div class="fitxa" id="fit5"></div>
            <div class="fitxa" id="fit6"></div>
            <div class="fitxa" id="fit7"></div>
            <div class="fitxa" id="fit8"></div>
            <div class="fitxa" id="fit9"></div>
        </div>
        <div id="consola">
            <div id="fitxes_iguals">
            </div>
        </div>
        <button id="comprobar">CHECK</button>
        <div id="fitxa_seleccionada">
        </div>
    </body>
</html>

Código Javascript:

Ver originalvar x;
x = $(document);
x.ready(inicializarEventos);
function inicializarEventos()
{
    var fitxes_inici = {
        fitxa1: "img1"
        , fitxa2: "img3"
        , fitxa3: "img5"
        , fitxa4: "img7"
        , fitxa5: "img6"
        , fitxa6: "img2"
        , fitxa7: "img4"
        , fitxa8: "img9"
        , fitxa9: "img8"
    };
 
    var fitxes_final = {
        fitxa1: "img1"
        , fitxa2: "img2"
        , fitxa3: "img3"
        , fitxa4: "img4"
        , fitxa5: "img5"
        , fitxa6: "img6"
        , fitxa7: "img7"
        , fitxa8: "img8"
        , fitxa9: "img9"
    };
    //ponemos las fotos
    var guardar = "";
    $.each(fitxes_inici, function (indice, valor) {
        var nuevaImg = $("<img src='fotos/" + valor + ".jpg'>");
        $("#fitxes_iguals").append(nuevaImg);
    });
    //poner en fitxa selec
    $("img").on('click', function () {
        if ($("#fitxa_seleccionada:has(img)").length > 0) {
            alert("Ya tienes una fitxa seleccionada");
        } else {
            var cogerSrc = $(this).attr('src');
            guardar = cogerSrc;
            var selecImg = $("<img src='" + cogerSrc + "'>");
            $("#fitxa_seleccionada").html(selecImg);
            $(this).removeAttr('src');
        }
    });
    //poner tablero
    $(".fitxa").on('click', function () {
        var cogerID = $(this).attr('id');
        //ya tiene una fitxa
        if ($("#" + cogerID + ":has(img)").length > 0) {
            var volver = $("#" + cogerID + " img").attr("src");
            $("#fitxes_iguals").append("<img src='" + volver + "'>");
        }
        var cogerID = $(this).attr('id');
        $("#" + cogerID + "").html("<img src='" + guardar + "'>");
        $("#fitxa_seleccionada").empty();
        guardar = "";
 
    });
 
    //check
    var control = 1;
    var todoBien = true;
    $("#comprobar").on('click', function () {
        $.each(fitxes_final, function (indice, valor) {
            var src = $("#fit" + control + " img").attr("src");
            var comparar = 'fotos/' + valor + '.jpg';
            if (comparar === src) {
                $("#fit" + control + "").css("border-color", "green");
            } else {
                $("#fit" + control + "").css("border-color", "red");
                todoBien = false;
            }
            control++;
        });
        if (todoBien === true) {
            alert("Felicidades puzzle correcto");
        }
    });
}