jquery創建選擇，並觸發更改

我似乎無法得到這個工作。我正在使用jquery創建一個html選擇，並且我希望一些代碼在其值發生更改時執行。jquery創建選擇，並觸發更改

代碼如下：

<script type ="text/javascript"> 

    var firstweddingturn = '400'; 

    $('#weddingturn').change(function() { 

     alert ("Wedding select change triggered!"); 

     //var wedturn = $('#weddingturnselectid').val(); 
     //$('#div3').append('<br>Wedding turn selected, ' + wedturn + '</br>') 

    }); 


    $(document).ready(function() { 

     var html = []; 
     html[html.length] = '<select name="weddingturn" id="weddingturn">'; 
     var a = firstweddingturn; 
     var b = Number(firstweddingturn) + 16; 
     while (a < b) { 
     // do some code 
     html[html.length] = '<option name="asdf" value = "1">' + a + '</option>'; 
     a++; 
     } // end while 
     html[html.length] = '</select>'; 
     $('#div1').append(html.join('')); 

    }); 
</script>

我在做什麼錯？

來源

2011-08-19 jeremy

在這種情況下，select會在稍後創建，通過執行其他jQuery代碼。我的例子在這裏被簡化了。 – jeremy

但是你知道，當你創造它時，不是嗎？元素不會被添加爲某些庫的神祕結果。然後綁定事件處理程序。 '.live'和'.delegate'是專用功能，僅在非常特殊的情況下使用。在寫jQuery的四年中，我從不需要它們。 – Malvolio

此外，'html [html.length] = x'完全合法的Javascript，但'html.push（x）'更具慣用性。 – Malvolio

您需要使用.delegate()（或.live()），因爲您正在動態添加選擇。當您使用.change()附加onChange處理程序時，它僅附加到現有的匹配元素，而不是稍後添加的元素。要將事件附加到所有匹配的元素，包括那些添加到以後的頁面，你可以使用.delegate()功能，像這樣：

$('body').delegate('#weddingturn','change', function(){ 
    alert('Wedding select changed to ' + $(this).find('option:selected').val()); 
});

然而，正如一些人指出的那樣，你可以僅僅立即裝上的事件處理程序後添加到DOM的<select>。這樣，你仍然可以使用.change()，你的代碼應該運行得更快。

來源

2011-08-19 19:27:36

你做*不*需要使用綁定！ – Malvolio

從技術上講，你是對的 - 在添加'select'後添加事件處理程序也可以。但是，我想如果他以後不打算改變'select'，他只會硬編碼HTML而不是動態生成它。使用'.live（）'給他這個選項。 –

他應該使用代表，因爲不建議住在現場 – secretformula

您的動態添加select到DOM，在select利己不存在這樣的事件處理程序不會被綁定到元素的事件處理程序的聲明時使用.live附加的事件處理程序動態添加元素

$('#weddingturn').live('change',function() { 

     alert ("Wedding select change triggered!"); 

     //var wedturn = $('#weddingturnselectid').val(); 

     //$('#div3').append('<br>Wedding turn selected, ' + wedturn + '</br>') 

    });

DEMO

jquery live

來源

2011-08-19 19:27:46 Rafay

包含此：

$('#weddingturn').live('change', function() { 

     alert ("Wedding select change triggered!"); 

     //var wedturn = $('#weddingturnselectid').val(); 

     //$('#div3').append('<br>Wedding turn selected, ' + wedturn + '</br>') 

    });

在$(document).ready

，並改變它使用live

來源

2011-08-19 19:27:57 qwertymk

你需要使用live綁定，因爲它被加載後的DOM負荷：

$("#weddingturn").live("change", function() { 

});

而且，我會把它放在$(document).ready的範圍內，最好在加載它的代碼之後（只是爲了邏輯線性。）

來源

2011-08-19 19:28:32

在創建元素之前，您正在連接事件處理程序。

（你可以使用.live（）或者你可以互換操作的順序）

來源

2011-08-19 19:29:02

-1

您在選擇不存在設置change功能。

來源

2011-08-19 19:29:44 Malvolio

當.change()事件被綁定時，該元素還不存在。你有兩個選擇：

綁定在創建元素之後事件（最簡單和推薦的選項）
使用.delegate()（或.live()）告訴jQuery來綁定事件，以選擇匹配的任何元素每當它被添加到DOM。如果您選擇此選項，如果您使用的是最新版本的jQuery > 1.4.2，則delegate()是首選方法，因爲它的性能高於live()。

來源

2011-08-19 19:30:40 andyb

咦？「.delegate」如何比「移動該死的代碼」更「高性能」？ – Malvolio

@Malvolio啊，那部分應該是第二個選項的一部分。更正傳入 – andyb

我明白了。是的，'.delegate'比'.live'好，但只是將代碼移到正確的位置更好。 – Malvolio

jquery創建選擇，並觸發更改

回答

相關問題