0

我正在尝试为我的 jQuery/PHP 创建一个事件，以便在向下滚动时加载更多内容。但是我的 .on() 事件遇到了一些麻烦。

我创建了一个函数（你看到的就是下面的代码，我刚刚删除了函数 functioname{}），当到达页面底部时调用它。

我的问题是，使用 .on() 你必须添加一个“点击”属性，这对我来说有点困难，因为它必须在没有点击的情况下加载。当我调用该函数时，是否有一个属性使它运行 .on() ？

$("#container").on("click", ".box", function(event){
    alert("hej");

 $.post("site/scroll.php?mabid=" + $mabid,
  function(data){
    if (data != "") {
    alert($(".box:last").attr("mabid"));
    $(".box:last").after(data); 
  }
 });
});

我使用 .on() 的原因是因为它必须向新创建的元素添加一个 jQuery 插件，即.box，这使得它具有正确的布局。我试图绑定到新创建的 dom 元素的插件是这样的：http ://www.wookmark.com/jquery-plugin

更新

我在加载内容时没有问题。我在将 jQuery 插件 Wookmark 添加到 NEW DOM 元素时遇到了麻烦。这意味着它很乱，看起来非常非常糟糕。

请阅读他们网站上的 WookMark 插件的小描述。这是一个插件，可以让.box像在 pinterest.com 或 wookmark.com 上一样，让它们相互配合。

现在新的 DOM 元素只是插入并且看起来很乱，没有激活插件。

更新2

经过一些沟通和误解后，只需将 Wookmark 插件添加到 $.post() 中的新元素即可解决问题；像：

$.post("scroll.php?...", function(data){

  if(data != ""){
   //add the new dom elements, with .after(), .append() or something else.
   //add the needed effects to the new dom elements. For example with wookmark:
   $('.box').wookmark(//wanted effects); where .box is the dom elements I've created.
  }

});

感谢大家的帮助，尤其是 FelixKling 和 Oscar！

4

4 回答 4

0

我不确定我是否正确理解它但是你知道你可以调用一个元素的 .click() ，就像$('.box).click()你点击元素一样。

于 2012-05-28T18:02:52.780 回答
0

jQuery “live”（已弃用）或“on”仅适用于 click、dblclick、keydown、keypress、keyup、mousedown、mousemove、mouseout、mouseover 和 mouseup 事件。

但是有一个解决方案，如果您只需要使用$('selector').on()或$('selector').live()

使用这个库：

实时查询： https ://github.com/brandonaaron/livequery

$('selector').livequery(function(){
  // Here goes your on() logic.
});
于 2012-05-28T18:03:34.117 回答
0

您正在寻找 .scroll() 事件。试试这个：

$(window).scroll(function(e) {
     alert('window scroll');
     // write your fetching data part here
});

更新：尝试自定义事件方法：

// bind the "applyWookmark" event 
$("#container").on("applyWookmark", ".box", function(event){
    // this will reapply the plugin
    $('.box').wookmark();
}); 

// after loading the data
// fire the custom event
$.post("site/scroll.php?mabid=" + $mabid,
    function(data){
    if (data != "") {
        alert($(".box:last").attr("mabid"));
        $(".box:last").after(data);  
        // fire event
        $('.box').trigger('applyWookmark');
    }
}

虽然没有测试...

于 2012-05-28T18:08:59.480 回答
0

一旦获得新数据，您似乎所要做的就是将插件应用于新元素。

直接将其应用于他们：

$(data).wookmark();

或者在将新数据添加到 DOM 后选择所有这些元素：

$('.box').wookmark();

也就是说，我不知道当您将插件多次应用于相同的元素时会发生什么。也许最好只将它应用于新元素。

于 2012-05-28T18:44:34.107 回答