Question

我有一个在JavaScript中通过createElement()创建div的函数。问题是这个div没有触发scroll事件。奇怪的是，click事件触发但不触发scroll事件。当我在jQuery上通过$.html()创建div时，这很有效。

另外我在h .direction_left和. direction_right上滚动div的其他两个函数也不起作用。当我通过$.html()创建div时，这些也很有效。这里有什么问题？感谢。

这是scroll function to load data via ajax。

var scroll = true;

$(document).on('scroll', '#infinited', function() {
    alert('scroll');
    var div = $(this);

    if(div[0].scrollWidth - div.scrollLeft() == div.width()) {

        if(scroll == true) {
            $.post('ajax/user/get_infinited.php', {'start': div.children().length}, function(data) {
                if(data == '')
                scroll = false;
            div.append(data);
            });
        }
    }
});

这是创建infinited div。

的函数

create_infinited: function() {
    if(!document.getElementById("i")) {
        var i = document.createElement("div");
            i.id = 'i';
            i.style.position = 'relative';

        var infinited = document.createElement("div");
            infinited.id = 'infinited';

        var direction_left = document.createElement("div");
            direction_left.className = 'direction_left';

        var direction_right = document.createElement("div");
            direction_right.className = 'direction_right';

        i.appendChild(direction_left);
        i.appendChild(infinited);
        i.appendChild(direction_right);

        $('#search_form').after(i);
    }
}

Answer 1

它无效，因为scroll事件没有在DOM中冒出来（如果您检查例如click事件，它将起作用并且证明问题不在你的代码 - 或者至少不是你期望的方式。）

但是，在现代浏览器中，您可以通过addEventListener在文档级别捕获滚动事件，如下所示：

document.addEventListener(
    'scroll', 
    function(event){
        var $elm = $(event.target);
        if( $elm.is('#infinited')){
            // put your code here
        }
    },
    true
);

或者您可以将“数据加载器逻辑”移动到可以在getInfinited中访问的函数（我们称之为create_infinited），并在那里订阅：

$('#search_form').after(i);
$('#infinited').on('scroll', getInfinited);

滚动jQuery不能在JS上使用createElement

1 个答案: