jquery - 事件監聽器：爲什麼只有一個腳本可以工作？

我正在運行rails 3.1，並在文件/app/assets/javascripts/procedures.js中包含以下jquery腳本。jquery - 事件監聽器：爲什麼只有一個腳本可以工作？

$(document).ready(function(){ 
    $('.unselected').click(function() { 
    $(this).removeClass('unselected'); 
    $(this).addClass('selected'); 
    }); 

    $('.selected').click(function() { 
    $(this).removeClass('selected'); 
    $(this).addClass('unselected'); 
    }); 
});

第一個操作按預期工作（選擇），但取消選擇不起作用。

另一方面，此腳本按預期工作。

$(document).ready(function(){ 
    $('.tile').click(function() { 
    if ($(this).hasClass('selected')) { 
     $(this).removeClass('selected'); 
     $(this).addClass('unselected'); 
    } else if ($(this).hasClass('unselected')) { 
     $(this).removeClass('unselected'); 
     $(this).addClass('selected'); 
    } 
    }); 
});

是否因爲事件監聽器只在腳本第一次運行時才被分配？

來源

2012-07-03 jonH

綁定到單擊處理不會影響到與該類新元素後添加類.unselected到的元素。您必須使用jQuery .on()來綁定當前和未來的所有.unselected元素。 http://api.jquery.com/on/

更改.click() s到是這樣的，對於.selected和.unselected：

$(document).on("click",".unselected",function(){ 
    // toggle your classes here 
});

來源

2012-07-03 06:53:02 nbrooks

還可以考慮使用這種方法來切換類：http://api.jquery.com/toggleClass/ – nbrooks

如果在DOM中有一些父元素（對於'.tile'元素）在上面的腳本中用它的id選擇器代替'document'，以提高效率。 – nbrooks

因爲jquery將事件綁定到document.load()上的元素，並且當您將類更改爲unselected時，這並不意味着您已將該事件綁定到該元素。

試試這個

$(document).ready(function(){ 
    $('body').on('click','.unselected',function() { 
    $(this).removeClass('unselected'); 
    $(this).addClass('selected'); 
    }); 

    $('body').on('click','.selected',function() { 
    $(this).removeClass('selected'); 
    $(this).addClass('unselected'); 
    }); 
});

來源

2012-07-03 06:52:59

的document.ready儘快執行的文檔加載。

我不確定，但是這個特定的問題說，是的，document.ready中的函數是在DOM加載後立即定義的。現在，當DOM加載時，它僅發現div「未選中」。所以，它將相應的功能綁定到這個類。另一方面，它無法找到div「selected」，所以它不能綁定bind函數到這個類。

我會請求任何專家請說明這個答案，如果它的權利。否則告訴什麼是正確的！

來源

2012-07-03 06:53:20

jquery - 事件監聽器：爲什麼只有一個腳本可以工作？

回答

相關問題