2013-04-17 44 views
2

我使用的following.This不動態創建elements.I工作是usinh的jQuery 1.4.2滾動()在jQuery中不工作的動態元素

$(".wrapper1").live("scroll",function(){ 
    alert(123); 
    $(".wrapper2") 
    .scrollLeft($(".wrapper1").scrollLeft()); 
    }); 

這也沒有用於正常工作的元素也。

什麼可能是這裏的原因提前。請幫助me.Thanks ....

+2

你爲什麼使用這個過時的版本的任何原因?我知道我不會管理不是爲今天的瀏覽器製作的版本,而是在新版本中修復了很多錯誤。 –

+0

,因爲在我的項目中已經使用過。 – PSR

+0

任何版本對我來說都沒有問題 – PSR

回答

6

瀏覽器變化,jQuery的錯誤是固定的(而頁面加載哪個加載),這兩個原因總是使用最新版本的jQuery(經過適當測試後,你很重要)不能指向最新)。

您的代碼,適於jQuery的1.9,將是,另一事件類型,

$(document).on("event_type",".wrapper1", function(){ 
    $(".wrapper2") 
     .scrollLeft($(".wrapper1").scrollLeft()); 
}); 

使用$(document)作爲接收機的原因,而不是$(".wrapper1")是隻有元件在結合時將接收和代表現有事件。 on不能像舊的live那樣工作。

除了這對於scroll事件不起作用,因爲它們不起泡。

所以最reasonnable解決方案,我可以建議將定義一個函數:

$.fn.bindScrollHandler1 = function(){ 
    $(this).on('scroll', function(){ 
     $(".wrapper2").scrollLeft($(".wrapper1").scrollLeft()); 
    }); 
} 

,並在啓動時調用它:

$('.wrapper1').bindScrollHandler1(); 

,並在每次創建新的.wrapper1元時間:

myNewElement.bindScrollHandler1(); 

Demonstration

請注意,您的完整邏輯似乎有點欠缺,因爲您不配對滾動條,但使它們都工作相同。

+0

它不適用於我看到這裏http://jsfiddle.net/TBnqw/1539/ – PSR

+0

它不適合我。你可以創建一個鏈接請致電 – PSR

+0

是的,你是對的,滾動事件不會泡... –

2

我知道你解決你的問題(或者你認爲你解決它),但是如果你有一些問題,你應該知道:

事件處理程序只能綁定到當前選擇的元素;他們必須在您的代碼撥打.on()時在頁面上存在。

這是從jQuery documentation

有2種方式使用.on()功能:

  1. $('selector').on('event', function() { body of the handler });

    事件處理程序是直接連接到一個匹配元素。由於它是命令式完成的,所以選擇器被解析並且所有匹配的元素都得到一個附加的事件處理程序。例如,與致電$('.asdf').click()相同。

  2. $('selector1').on('event', 'selector2', function() { handler });

    正如你可以看到有2種選擇:事件處理程序將被連接到selector1,但它會處理事件開火選擇器2!這非常像.live().delegate(),(實際上它完全一樣)。

    .live()所做的是將事件處理程序附加到「文檔」,並處理由選擇器匹配的元素的事件(與$('document').on('event', 'selector', function() {});相同)。

    這樣做的好處是事件處理程序已附加到已存在的元素,並且能夠通過事件冒泡來處理動態創建的元素的事件。

    所以在你的情況下,第二種語法似乎是你所需要的。

編輯:沒有與此一個很大的問題我不知道的:滾動元素不冒泡。有解決方法,但我現在沒有時間寫解決方案。當我幾個小時後回來時,讓我回頭看看它。或者如果經銷商的解決方案正在工作,請不要猶豫,接受它。

+1

否:由於滾動事件不會冒泡,因此無法將其委託給動態添加的元素。 –

+0

但是爲什麼第二個人不適合我 – PSR

+0

這比我想象的要困難一些。嘗試dystroy的解決方案。 @dystroy:你是對的。 – SoonDead

0

在我的應用程序中,每次單擊按鈕時都有一個按鈕將表單字段添加到主體中 - 我想將頁面向下滾動到新元素,但這不起作用,原因很明顯(冒泡,等等。)。我想出了一個簡單的解決...

function scroll(pixels){ 
    $('html, body').animate({ 
     scrollTop: pixels 
    }, 1000); 
}; 

function addObservation(x){ 
    $('body').append(x); 
    newFieldSet = $('fieldset').last(); 
    pixelsFromTop = newFieldSet.offset().top; 
    scroll(pixelsFromTop); 
}; 

$(document).on("click", "#add_observation", function(){ 
    addObservation("<fieldset>SOME FORM FIELDS HERE</fieldset>"); 
}); 

所以每次添加一個字段,.offset().top措施的字段集多少像素從頂部,然後滾動窗口的距離。在你的情況下,你可以做pixelsFromLeft = newFieldSet.offset().left並用scrollLeft代替scrollTop,或者這個效果。