Javascript - divを別のランダムdivに置き換える（新しいdivでボタンが機能しない）

Question

私の全体的な目的は、画像に基づいてテストを作成することです。しかし、私は早い段階で立ち往生しています。アイデアは、画像が表示され、ユーザーが正しい答えを選択するためにボタンをクリックしなければならないということです。これまでクリックしたボタンは、画像が別の画像にランダムに置き換えられます。私が抱えている問題は、イメージが新しいイメージによってランダムに置換されると、新しいイメージと同じdiv内のボタンが機能しないということです。したがって、ユーザーは最初のdivのボタンしか使用できず、このdivが置き換えられると、新しいrandom divを超えることはできません。私はフォーラムの初心者ですが、誰かが私を助けることができれば非常に感謝します。

ここは私のhtmlです。ここで

<div id = 'suitcase'> 
    <img src ='https://upload.wikimedia.org/wikipedia/commons/c/ce/Suitcase_750x500.jpg' width = '400'/> 
    <ul> <button id = 'correct1'> suitcase </button> &nbsp; &nbsp; <button class = 'incorrect1'> backpack </button> &nbsp; &nbsp; <button class = 'incorrect1'> handbag </button> </ul> 
</div>; 

<div id = 'printer'> 
    <img src = 'http://cdn2.pcadvisor.co.uk/cmsdata/reviews/3598061/HP_Envy_5640_e-All-in-One.jpg' width = '400'/> 
    <ul> <button id = 'correct2'> printer </button> &nbsp; &nbsp; <button class = 'incorrect2'> photocopier </button> &nbsp; &nbsp; <button class = 'incorrect2'> computer </button> </ul> 
</div>; 

<div id = 'desk'> 
    <img src = 'https://www.directofficesupply.co.uk/components/com_virtuemart/shop_image/product/H4P3.jpg' width = '400'/> 
    <ul> <button class = 'incorrect3'> printer </button> &nbsp; &nbsp; <button class = 'correct3'> desk </button> &nbsp; &nbsp; <button class = 'incorrect3'> computer </button> </ul> 
</div> 

は私が間違っている？何をやっている私のJavascriptとjQuery

$(window).load(function() { 
    $("#printer").hide(); 
}); 

$(window).load(function() { 
    $("#desk").hide(); 
}); 

var image1 = document.getElementById("desk").innerHTML; 
var image2 = document.getElementById("suitcase").innerHTML; 
var image3 = document.getElementById("printer").innerHTML; 

var imageList = [image1, image2, image3] 

function getRandomImage() { 
    var random = imageList[Math.floor(Math.random() * imageList.length)]; 
    return random; 
} 

var randomImage = getRandomImage(); 


$("#correct1").click(function() { 
    $(this).css({ 
    "background": "blue" 
    }); 
    setTimeout(function() { 
    $("#suitcase").html(randomImage); 
    }, 500); 

    $("#correct2").click(function() { 
    $(this).css({ 
     "background": "blue" 
    }); 
    setTimeout(function() { 
     $("#printer").html(randomImage); 
    }, 500); 
    }); 

    $("#correct3").click(function() { 
    $(this).css({ 
     "background": "blue" 
    }); 
    setTimeout(function() { 
     $("#desk").html(randomImage); 
    }, 500); 
    }); 

}); 

$(".incorrect1").click(function() { 
    $(this).css({ 
    "background": "red" 
    }); 
    setTimeout(function() { 
    $("#suitcase").html(randomImage); 
    }, 500); 
}); 


$("#correct2").click(function() { 
    $(this).css({ 
    "background": "blue" 
    }); 
    setTimeout(function() { 
    $("#printer").html(randomImage); 
    }, 500); 
}); 

$(".incorrect2").click(function() { 
    $(this).css({ 
    "background": "red" 
    }); 
    setTimeout(function() { 
    $("#printer").html(randomImage); 
    }, 500); 
}); 

$("#correct3").click(function() { 
    $(this).css({ 
    "background": "blue" 
    }); 
    setTimeout(function() { 
    $("#desk").html(randomImage); 
    }, 500); 
}); 

$(".incorrect3").click(function() { 
    $(this).css({ 
    "background": "red" 
    }); 
    setTimeout(function() { 
    $("#desk").html(randomImage); 
    }, 500); 
}); 

です！

Answer 1

あなたがコードを書いた方法は、ドキュメントによって読み込まれたボタンだけがわかっています。生成されたボタンはわかりません。あなたは使用する必要があります.onまたは.delegate

私はここにサンプルを書きます。すべてを変更することができます。

あなたが.onを使用することができます方法：

$("#correct2").on('click', function(){ 
    $(this).css({ 
     "background": "blue" 
    });setTimeout(function(){ 
     $("#printer").html(randomImage); 
    }, 
    500); 
}); 

あなたは.delegate（jQueryのV3で廃止されている）を使用することができる方法：

$('body').delegate('#correct2', 'click', function(){ 
    $(this).css({ 
     "background": "blue" 
    });setTimeout(function(){ 
     $("#printer").html(randomImage); 
    }, 
    500); 
}); 

Answer 2

を私は最初のケースのための例を行います一度理解すれば、複製が容易になります。

最初の例では、「間違った」ボタンを修正します。ここ

<div id = 'suitcase'> 
    <img src ='https://upload.wikimedia.org/wikipedia/commons/c/ce/Suitcase_750x500.jpg' width = '400'/> 
    <ul> <button id = 'correct1'> suitcase </button> &nbsp; &nbsp; <button class = 'incorrect1'> backpack </button> &nbsp; &nbsp; <button class = 'incorrect1'> handbag </button> </ul> 
</div> 

JS

$(".incorrect1").click(function() { 
    $(this).css({ 
    "background": "red" 
    }); 
    setTimeout(function() { 
    $("#suitcase").html(randomImage); 
    }, 500); 
}); 

問題

HTMLは、クリックイベントは、文書のロード時に "incorrect1" ボタンにバインドされていることです。一度それを削除して別のボタンに置​​き換えると、同じhtmlクラス/ IDを持っていても、イベントは既にバインドされていて自動的に「再バインド」されません。

私の提案は、あなたが外側の要素にイベントをバインドし、それが「incorrect1」セレクタ（.on()機能についての詳細を読む）への呼び出しのfilterということです。だから、

$("#suitcase").on("click", ".incorrect1", function() { 
    $(this).css({ 
    "background": "red" 
    }); 
    setTimeout(function() { 
    $("#suitcase").html(randomImage); 
    }, 500); 
}); 

、ここで何が起きているのでしょうか？私はスーツケースdiv全体にイベントをバインドしています。次に、イベントタイプを「クリック」として指定し、セレクタ「.incorrect」に一致する「#suitcase」内の要素のクリックのみをチェックするように指示します。

このように、イベントは削除されない要素（スーツケースdiv）にバインドされます。そこにあるすべての子ノードを削除して置き換えても、イベントリスナーは外側のdivにバインドされているため、以前に示した問題はもはや問題にはなりません。

希望すると助かります！