JQuery .change () função não funcionando com a lista de seleção dinamicamente povoada

Question

Eu tenho um campo selecionado que é preenchido dinamicamente com uma chamada AJAX que simplesmente retorna todas as opções de seleção HTML. Aqui está a parte do PHP que apenas ecoa as tags selecionadas e preenche dinamicamente cada opção/valor.

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>";
}  

Depois que esta lista é preenchida, estou tentando chamar um evento de alteração, para que sempre que a opção padrão seja alterada na lista de seleção ou em um campo de texto com a mesma classe, ela desativa um botão de rádio definido em outra parte do formulário . (Você pode ver a pergunta inicial que pedi para obter essa parte da funcionalidade funcionando aqui)

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

Por algum motivo, mesmo que eu dê ao campo selecionar o nome da classe apropriado (afetor), quando seleciono diferentes opções no campo, as outras partes do formulário não desativam. O campo de texto estático com a mesma classe funciona bem. Estou perplexo.

Alguma ideia?

Answer 1

Acabei de comentar sua última pergunta ... aqui está o que eu disse:

Use jQuery bind

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

Ligue para AddSelectChange em sua função de sucesso do Ajax. Deve fazer o truque. Dê uma olhada no JQuery Live Event também (para quando você deseja definir eventos para todos os elementos DOM atuais e futuros em um projeto posterior ou algo assim). Infelizmente, o evento de mudança e alguns outros ainda não são apoiados no Live. Bind é a próxima melhor coisa

Answer 2

_{Uma resposta mais atualizada ..}

Como os elementos são preenchidos dinamicamente, você está procurando delegação de eventos.

Não use .live()/.bind()/.delegate(), no entanto. Você deveria usar .on().

De acordo com JQuery API Docs:

A partir de jQuery 1.7, o .on() O método é o método preferido para anexar manipuladores de eventos a um documento. Para versões anteriores, o .bind() O método é usado para anexar um manipulador de eventos diretamente aos elementos. Os manipuladores são anexados aos elementos atualmente selecionados no objeto jQuery, para que esses elementos devem existir no ponto em que a chamada para .bind() ocorre. Para uma ligação mais flexível de eventos, consulte a discussão da delegação de eventos em .on().

Portanto, você usaria algo assim:

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

Answer 3

Um exemplo usando .live ()

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

Answer 4

Para itens que são inseridos dinamicamente no DOM, seus eventos devem estar vinculados a

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

Isso ocorre porque quando você corre $(function(){}); e vincular eventos usando $.click ou $.change, etc., você está vinculando eventos aos elementos já existe no DOM. Qualquer manipulação que você faça depois disso não é afetada pelo que quer que aconteça no $(function(){}); ligar. $.bind Diga à sua página para procurar elementos futuros em seu seletor, bem como atuais.

Answer 5

tente .Live:http://docs.jquery.com/events/live

De Docs: Ligna um manipulador a um evento (como clique) para todo o elemento atual - e futuro - correspondente. Também pode vincular eventos personalizados.

Answer 6

Eu encontrei como solução para fazer apenas

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

no arquivo php/html e, em seguida, gera opções para ele por Ajax:

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

Nas opções de eco Options_generator.php apenas:

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

Answer 7

Use a função delegate (). Mais sobre isso aqui http://www.elijahmanor.com/differences-between-jquery-bind-vs-live-vs-delegate-vs-on/