jQuery的.change（）函數不能與動態填充SELECT列表

工作我有一個動態填充與AJAX調用只是返回所有的HTML選擇選項的選擇字段。這裏是PHP的一部分，它只是回顯select標籤並動態填充每個選項/值。jQuery的.change（）函數不能與動態填充SELECT列表

echo "<select name='player1' class='affector'>"; 
echo "<option value='' selected>--".sizeof($start)." PLAYERS LOADED--</option>"; 

foreach ($start as $value) { 
    echo "<option value='".$value."'>".$value."</option>"; 
} 
    echo "</select>"; 
}

填充這個名單後，我試圖調用一個變化事件，這樣無論何時默認選項是在SELECT列表或與同一類的文本字段改變，但禁用單選按鈕設置在表單的另一部分。（你可以看到最初的問題，我問得到的工作here功能這一部分）

$('.affector').change(function(){ 
     $(this).parents('tr').find('input:radio').attr('disabled', false); 
});

出於某種原因，即使我給選擇欄適當的類名（影響器），當我選擇不同的選項在該字段中，表單的其他部分不會禁用。具有相同類的靜態文本字段正常工作。我很難過。

任何想法？

來源

2010-01-09 tresstylez

快速提示，而不是'回聲'，試試：'回聲「<選項值='$值'>「'。如果你正在訪問一個數組，你可以使用'echo'

只需在您的最後一個問題......這就是我說：

使用jQuery在你的Ajax成功功能綁定

function addSelectChange() { 
    $('select').bind('change', function() { 
     // yada yada 
    }); 
}

呼叫addSelectChange。它應該做的伎倆。也可以看一下jQuery live事件（因爲當你想爲後來的項目中的所有當前和將來的DOM元素設置事件時）。不幸的是，現場還沒有支持變化事件和其他一些事件。綁定是未來最好的事情

來源

2010-01-09 00:54:06 munch

真棒答案！馬上幫助！ – 2016-07-28 13:34:44

對於動態插入到DOM的項目，他們的活動必須

$('.selector').bind('change',function() { doWork() });

的約束，這是因爲當你運行$(function(){});和使用$.click或$.change等事件綁定，要綁定事件元素已經存在於DOM中。在此之後進行的任何操作都不會受到$(function(){});調用中發生的任何操作的影響。 $.bind會告訴您的頁面在您的選擇器中尋找未來的元素以及當前的元素。

來源

2010-01-09 00:53:37 Jason

.change和.bind都以同樣的方式工作。它們只會綁定到DOM中當前的元素。 – Anurag 2010-01-09 02:14:45

@anurag - 不正確。如果兩個元素都已經在DOM中，那麼他們的工作方式是一樣的。但.change不會綁定DOM中的新元素（這是OP詢問問題的原因......），.bind會將當前和未來事件綁定到元素。 – Jason 2010-01-09 03:31:12

@Jason：這並不難測試出來..檢查出這個小的html代碼片段（http://slexy.org/raw/s2XA8QihVm）我寫了一個測試，看看bind是否適用於未來的dom元素，而不是。這也是jQuery的源代碼，它基本上將'change（）'，'mouseover（）'，'blur（）'等的函數調用轉發給'bind（）'。以下是jQuery源代碼中的一小段代碼 - http://slexy.org/view/s206rDeFeO，或者您可以在code.jQuery.com本身查看完整源代碼 - http://code.jquery.com/jquery-latest。 JS。 'live（）'是綁定當前和未來事件的函數。 – Anurag 2010-01-09 05:52:13

嘗試.live： http://docs.jquery.com/Events/live

從文檔：綁定一個處理程序的事件（如點擊）所有當前 - 和未來 - 匹配的元素。也可以綁定自定義事件。

來源

2010-01-09 00:53:54

**「目前不支持：...更改...」** – Sampson 2010-01-09 00:55:33

堆棧溢出失敗！ – 2010-01-09 01:41:38

一個例子使用.live（）

$('#my_form_id select[name^="my_select_name"]').live('change', (function() { 
    console.log($("option:selected", this).val()); 
    }) 
);

來源

2011-08-29 14:04:24 Tapefreak

這個.live（）總是適用於我，在動態填充的選擇字段。 – 2012-11-24 13:31:12

.live（）現在已被棄用。使用類似於 '$（document）.on（「change」，'＃my_form_id select [name^=「my_select_name」]'，function（）{...}）' – Seybsen 2013-02-13 13:44:29

我發現的解決方案，使只有

<select id="myselect"></select>

在PHP/HTML文件

，然後爲它生成選項AJAX：

$.post("options_generator.php", function (data) { $("#myselect").append(data); });

在僅options_generator.php回聲選項：

echo "<option value='1'>1</option>"; 
echo "<option value='2'>2</option>";

來源

2012-04-26 11:01:24 bboydev

使用委託（）函數來代替。更多的是，這裏http://www.elijahmanor.com/differences-between-jquery-bind-vs-live-vs-delegate-vs-on/

來源

2014-06-16 17:14:38

_{更是最新的答案..}

由於要素動態填充，你正在尋找event delegation。

儘管如此，請勿使用.live()/.bind()/.delegate()。您應該使用.on()。

按照jQuery API docs：

在jQuery 1.7的，所述.on()方法是事件處理程序安裝到一個文件的優選方法。對於早期版本，.bind()方法用於將事件處理程序直接附加到元素。處理程序會附加到jQuery對象中當前選定的元素，因此這些元素必須存在於對.bind()的調用發生時。要獲得更靈活的事件綁定，請參閱.on()中關於事件委派的討論。

因此你會使用這樣的：「< '$值期權價值=」「'>」

$(document).on('change', 'select', function (e) { 
    /* ... */ 
});

來源

2015-01-05 00:36:33

yes對於所有場景，靜態或動態內容:) – user889030 2017-03-14 06:45:27

jQuery的.change（）函數不能與動態填充SELECT列表

回答

相關問題