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 
     } 
    }); 

}); 

Текст с id="start" будет сгенерировано, когда содержимое фреймов загружается. Проблема в том, что всякий раз, когда я нажимаю на id="start", ничего не происходит. Ничего. Консольный журнал не сообщает о какой-либо ошибке, прежде чем щелкнуть, и не сообщит о какой-либо ошибке после того, как я нажал.

Кажется, я не понимаю, в чем проблема.

Answer 1

Вы должны использовать jquery on для привязки событий к динамически созданным элементам.

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

Где .message является elelment ваш #start элемент находится в.