jQuery-Click函数不会触发

Question

I'm having problems with firing of a function whenever my ID is clicked. Currently, this is how my code looks:

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

});

A text with id="start" will be generated when the iframes content is loaded. The problem is, whenever I click on the id="start" nothing happens. Nothing. The console log doesn't report any error before I click nor does it report any error after I've clicked.

I can't seem to find what the problem is.

Answer 1

You have to use the jquery on to bind events to dynamically created elements.

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

Where .message is the elelment your #start element is in.