javascript - jquery Click事件不会触发

Question

我不确定我的 closeContent(); 没有触发。我试图加载一些东西然后关闭它并使用 css3 制作动画。

我也想展示加载程序，但不确定它是最佳方法。

    $('.show-content').on('click', function (e) {
        e.preventDefault();
        openContent();
    });

    $('#load-content .prev').on('click', function (e) {
        e.preventDefault();
        closeContent();
    });


    function openContent(){

    $('#load-content').load('../views/product-page.html');

    $('.container').addClass('loaded', function () {
         //setTimeout(function () {
                $('#load-content').html('<img id="loader" src="../assets/images/bx_loader.gif">');
            $('#loader').css({border: '0', position: 'absolute', top: '26px', left: '50%', 'margin-left': '-26px'});
                console.log('loading???')
        //}, 60000);
    });

    $("#load-content").bind("transitionend webkitTransitionEnd oTransitionEnd MSTransitionEnd", function () {
        $(this).addClass('animate');
        var body = $("body,html");

                body.animate({
                  scrollTop: 0
                }, 800);
    });
    }

    function closeContent(){
        var Loaded = !$(this).closest('.container').hasClass('.loaded');
        if (!Loaded) {
                $('.animate').removeClass('animate');
            $("#load-content").bind("transitionend webkitTransitionEnd oTransitionEnd MSTransitionEnd", function () {
          $('.loaded').removeClass('loaded');
          $('#show-content').remove();
          });
        }           
    }

Answer 1

你需要传递this

$('#load-content .prev').on('click', function (e) {
    e.preventDefault();
    closeContent(this);
});

然后在函数中

function closeContent(ele){
     var Loaded = !$(ele).closest('.container').hasClass('.loaded');

如果 .prev 元素是动态添加的，则使用事件委托(delegate)。

$('#load-content').on('click','.prev',function(e){
    e.preventDefault();
    closeContent(this);
});

或

$(document).on('click','#load-content .prev',function(e){
    e.preventDefault();
    closeContent(this);
});