Javascript - 用另一個隨機div替換div（按鈕不在新div中工作）

Question

我的總體目標是創建一個基於圖像的測試。但我陷入了一個早期階段。這個想法是一個圖像出現，用戶必須點擊一個按鈕來選擇正確的答案。他們點擊哪個按鈕，圖像被另一個圖像隨機替換。我遇到的問題是，當圖像被新圖像隨機替換時，按鈕（與新圖像相同的div）不起作用。所以用戶只能使用第一個div中的按鈕，然後當這個div被替換時，他們不能通過新的隨機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

我會做一個例子，第一情況下，只有，一旦你明白它很容易複製。

給出第一個例子，我們將修復「不正確」按鈕。

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> 

JS

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

這裏的問題是，點擊事件被綁定到文件裝載了 「incorrect1」 按鈕。一旦你刪除它並用另一個按鈕替換，即使它具有相同的html class/id，事件已經被綁定，並且它不會自動「重新綁定」。

我的建議是你綁定的事件外元素，然後過濾它的調用「incorrect1」選擇（閱讀更多關於.on()功能）：

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

因此，這裏發生了什麼？我將一個事件綁定到整個手提箱div上。然後，我將事件類型指定爲「單擊」，並告訴它僅檢查與我的選擇器「.incorrect」匹配的「#suitcase」內的任何元素的點擊。

這樣，事件綁定到一個不會被刪除的元素（您的行李箱div）。即使你刪除了所有的子節點並替換了它，事件監聽器也會綁定到外部div，所以我之前提出的問題不再是問題。

希望它有幫助！