要素の混同がありません

Question

私はX分後にコンテンツロッカーを生成するスクリプトを作成しています。問題は、likeButton内のコンテンツが表示されないことです。モーダルポップアップは、タイトルと指示のように、うまく表示されます。 likeButtonのコンテンツではありません。タイマーからコードブロックを取り除くと、それは機能します。私は少し混乱しています。どんな考えが起こっているの？

var title   = 'Please Press Like'; 
var instructions = 'Like our videos? Join our fanpage. It takes 1 second.'; 
var lockDelay  = 100; // 1200000 = 20 Minutes 

/* STOP EDITING */ 
var boxy; 

$(document).ready(function() { 
    // Create the like button 
    setTimeout(function() { 
     // Create the like button 
     var likeButton = '<div id="likeButton"><fb:like href="" send="false" layout="box_count" width="70" show_faces="false" font=""></fb:like></div>'; 

     // Display the modal 
     boxy = new Boxy('<p id="instructions">' + instructions + '</p>' + likeButton, { 
      title: title, 
      modal: true, 
      closeable: false, 
     }); 
    }, lockDelay); 

    // Close modal after user likes 
    $('#likeButton').mouseover(function() { 
     setTimeout(function() {boxy.hide()}, 3000); 
    }); 
}); 

Answer 1

まさにこの

var title   = 'Please Press Like'; 
var instructions = 'Like our videos? Join our fanpage. It takes 1 second.'; 
var lockDelay  = 100; // 1200000 = 20 Minutes 

/* STOP EDITING */ 
var boxy; 

$(document).ready(function() { 
    // Create the like button 
    setTimeout(function() { 
     // Create the like button 
     var likeButton = '<div id="likeButton"><fb:like href="" send="false" layout="box_count" width="70" show_faces="false" font=""></fb:like></div>'; 

     // Display the modal 
     boxy = new Boxy('<p id="instructions">' + instructions + '</p>' + likeButton, { 
      title: title, 
      modal: true, 
      closeable: false, 
     }); 

     // Close modal after user likes 
     $('#likeButton').mouseover(function() { 
      setTimeout(function() {boxy.hide()}, 3000); 
     }); 
    }, lockDelay); 

});