jQuery 標誌

jQuery Logo

本教學示範如何解決jQuery的Click Event不能應用在新加的元素上的問題。在很多情況下,我們都會使用JQuery更改網頁的內容。而一些原先捆綁的事件有可能不能應用在新加的元素上。

jQuery版本1.3至1.7

  1. 正常來說,我們會使用「.click()」建立事件。
    $('#block1').click(function(e) {
    	// Action
    });
  2. 我們可以使用「.live()」達到想要的效果。
    $('#block1').live("click", function(e) {
    	// Action
    });
  3. 以下是測試的代碼。複製並另存為新檔案,然後使用瀏覽器打開檔案即可。
    $('#add').click(function(e) {
    	var newBlock1 = $('<div id="block1" style="width: 100px; height: 100px; background-color: red; cursor: pointer;"></div>');
    	var newBlock2 = $('<div id="block2" style="width: 100px; height: 100px; background-color: green; cursor: pointer;"></div>');
    	$('body').append(newBlock1);
    	$('body').append(newBlock2);
    	$(this).remove();
    })
    
    $('#block1').click(function(e) {
    	alert("TEST RESULT 1");
    });
    
    $('#block2').live("click", function(e) {
    	alert("TEST RESULT 2");
    });

jQuery版本1.7或者以上

  1. 我們可以使用「.on()」達到想要的效果。
    $(document).on("click", '#block1', function(e) {
    	// Action
    });
  2. 以下是測試的代碼。複製並另存為新檔案,然後使用瀏覽器打開檔案即可。
    $('#add').click(function(e) {
    	var newBlock1 = $('<div id="block1" style="width: 100px; height: 100px; background-color: red; cursor: pointer;"></div>');
    	var newBlock2 = $('<div id="block2" style="width: 100px; height: 100px; background-color: green; cursor: pointer;"></div>');
    	$('body').append(newBlock1);
    	$('body').append(newBlock2);
    	$(this).remove();
    })
    
    $('#block1').click(function(e) {
    	alert("TEST RESULT 1");
    });
    
    $(document).on("click", '#block2', function(e) {
    	alert("TEST RESULT 2");
    });

    紅色的方塊沒有效果,綠色方塊出現效果。