Question

我正在非常简单地设置，我无法包裹我的大脑为什么这不起作用。我知道这是正确的，但它不起作用。

.navigate-button正在加入.overlay-content，因此.overlay-content不在页面加载的dom中，因此使用.on

当我点击链接时，它就像平常一样带我进入页面。我知道甚至没有被.navigate-button

绑定

Mark Up：

<div class="overlay" id="overlay">
    <div class="overlay-content--bg">
        <div class="overlay-content">

    <a class="navigate-button left" href="/question.php?id=<?php echo $json->id-1;$json->id+1; ?>">
        <
    </a>
    <a class="navigate-button right" href="/question.php?id=<?php echo $json->id+1; ?>">
        >
    </a>
        </div>
    </div>
</div>

JS：如果我在控制台中运行此代码，它按预期工作

$('#overlay').on('click','.navigate-button', function(){
    var id = $(this).attr('href');
    id = id.split('=');
    console.info(id[1]);
    callPage(id[1]);
    return false;
});

function callPage (id) {
    $.ajax({
        url:'/question.php?id='+id,
        success: function(data){
            $('.overlay-content').html(data);
            FB.XFBML.parse(document.getElementById('overlay'));
            $('.overlay').fadeIn();
        }
    });
}

Answer 1

我们在聊天中解决了这个问题。 Jamie的问题是.navigate-button div上的click事件没有冒泡到#overlay div，因为它被一个名为.stopPropagation的处理程序捕获并处理。解决方案是删除该中间处理程序。

Answer 2

你试过这个吗？

$(document).on('click', '.navigate-button', function() {
    YOUR FUNCTION
});

JQuery .on（）无法正常工作

2 个答案: