jQuery - 클릭 기능이 실행되지 않습니다.

Question

ID를 클릭 할 때마다 기능 실행에 문제가 있습니다. 현재이 내 코드는 모습입니다 :

$(document).ready(function() { 


    if (self != top) { 
     top.location.replace(location.href); 
    } 
    $(document).mousedown(function (e) { 
     if (e.button == 2) { 
      console.log('mousdown'); 
      $(window).blur(); 
     } 
    }); 
    $(document).mouseup(function (e) { 
     if (e.button == 2) { 
      console.log('mousup'); 
      $(window).blur(); 
     } 
    }); 

    var $iframe_height = $(window).innerHeight() - 90; 
    $('iframe').attr('height', $iframe_height + 'px'); 
    $(window).resize(function() { 
     var $iframe_height = $(window).innerHeight() - 90; 
     $('iframe').attr('height', $iframe_height + 'px'); 
    }); 

    $('.message').html('<div class="alert alert-warning">Waiting for advertisement to load...</div>'); 
    $('.close').on('click', function() { 
     window.open('', '_self', ''); 
     window.close(); 
    }); 
    var $seconds = 5; 
    var $window_width = $(window).innerWidth(); 
    var $width_per_second = $window_width/$seconds; 
    var $timer = null, 
     $current_second = 0; 

    setTimeout(function() { 
     if ((!$('body').hasClass('done')) && (!$('body').hasClass('blocked')) && (!$('body').hasClass('ready'))) { 
      $('body').addClass('ready'); 
      $('.message').html('<div class="alert alert-info">Click <b id="start" style="cursor:pointer;text-decoration:underline;">here</b> to start viewing this advertisement.</div>'); 
     } 
    }, 3000); 
    document.getElementById("website").onload = function() { 
     if ((!$('body').hasClass('done')) && (!$('body').hasClass('blocked')) && (!$('body').hasClass('ready'))) { 
      $('body').addClass('ready'); 
      $('.message').html('<div class="alert alert-info">Click <b id="start" style="cursor:pointer;text-decoration:underline;">here</b> to start viewing this advertisement.</div>'); 
     } 
    }; 

    $("#start").click(function() { 
     $('#website').focus(); 
     $('.message').html('<div class="alert alert-info"><b id="seconds">' + parseFloat($seconds - $current_second) + '</b> seconds remaining (do not leave this page).</div>'); 
     if ($timer !== null) return; 
     $timer = setInterval(function() { 
      if ($current_second == $seconds) { 
       clearInterval($timer); 
       $('.message').html('<div class="alert alert-success">Checking if you won, please wait&hellip;</div>'); 
       var $id = 10977; 
       var $reffbux_fp = new Fingerprint(); 
       var $reffbux_fp = $reffbux_fp.get(); 
       $.ajax({ 
        url: 'http://reffbux.com/account/register_roulette', 
        type: 'post', 
        data: { 
         id: $id, 
         fp: $reffbux_fp 
        }, 
        success: function (result, status) { 
         $('html, body').animate({ 
          scrollTop: 0 
         }, 500); 
         $('body').addClass('done'); 
         $('.melding').fadeOut(0).fadeIn(500); 
         $('.message').html(result); 
         $('.counter_bar').addClass('done'); 
        } 
       }); 
       return false; 
      } else { 
       var $counter_bar_width = $('.counter_bar').innerWidth(); 
       $('.counter_bar').css('width', parseFloat($counter_bar_width + $width_per_second).toFixed(2)); 
       $current_second++; 
       $("#seconds").text(parseFloat($seconds - $current_second)); 
      } 
     }, 1000); 
    }); 
    $('body').mouseleave(function() { 
     if ((!$(this).hasClass('done')) && (!$(this).hasClass('blocked')) && ($(this).hasClass('ready'))) { 
      $('.message').html('<div class="alert alert-error">You navigated away from the advertisement. Click <b id="start" style="cursor:pointer;text-decoration:underline;">here</b> to resume.</div>'); 
      clearInterval($timer); 
      $timer = null 
     } 
    }); 

}); 

iframe을 내용이로드 될 때 id="start"있는 텍스트가 생성됩니다. 문제는 아무 것도 클릭하지 않을 때마다 id="start"이 발생합니다. 아무것도. 콘솔 로그는 클릭하기 전에 오류를보고하지 않으며 클릭 한 후에 오류를보고하지도 않습니다.

문제점을 찾을 수없는 것 같습니다.

Answer 1

동적으로 생성 된 요소에 이벤트를 바인딩하려면 jquery on을 사용해야합니다. .message

$('.message').on('click', '#start', function(){ 

은 #start 요소를 클릭 on`.