JavaScript \ JQuery - identificando se o valor botão de rádio alterado por clique

Question

Eu tenho uma página que exibe uma lista de registros. O usuário pode selecionar o status de registro usando os botões de rádio, g .:

<div id="record_653">
  <label><input type="radio" name="status_653" value="new" checked/>new</label>
  <label><input type="radio" name="status_653" value="skipped" />skipped</label>
  <label><input type="radio" name="status_653" value="downloaded" />downloaded</label>
</div>

Eu estou usando JQuery para enviar as alterações feitas pelo usuário de volta ao servidor, onde eu usá-los para atualizar o banco de dados. Esta é uma versão simplificada do que eu faço:

$("#record_653").click( 
function(event) { 
    var url = ...,        
        params = ...;
    post(url,params);                    
});

O problema é que este código vai criar solicitações mesmo se o usuário clicar no mesmo botão que foi previamente marcada. O que eu realmente quero é o evento "na mudança", a não ser o seu comportamento no Internet Explorer não é muito útil (por exemplo, aqui ).

Então, eu acho que eu de alguma forma tem que identificar se o evento clique alterou o valor.

É o valor velho em algum lugar armazenadas (no DOM? No evento?) Para que eu pudesse comparar com ele?

Se não, como devo guardar o valor antigo?

Answer 1

O valor antigo não é armazenado em algum lugar onde você pode consultá-lo, não. Você vai precisar para armazenar o valor a si mesmo. Você poderia usar uma variável javascript, um elemento input oculto ou função data() do jQuery.

Editar

A função data jQuery fornece o acesso a uma estrutura de dados de chave de valor-par como uma maneira de armazenar dados arbitrários para um determinado elemento. Os olhares api como:

 // store original value for an element
 $(selector).data('key', value);

 // retrieve original value for an element
 var value = $(selector).data('key');

Um pensamento mais desenvolvido:

$(document).ready(function() {

    // store original values on document ready
    $(selector).each(function() {
        var value = $(this).val();
        $(this).data('original-value', value);
    })

    // later on, you might attach a click handler to the the option
    // and want to determine if the value has actually changed or not.
    $(selector).click(function() {

        var currentValue = $(this).val();
        var originalValue = $(this).data('original-value');
        if (currentValue != originalValue) {

            // do stuff.

            // you might want to update the original value so future changes
            // can be detected:
            $(this).data('original-value', currentValue);
        }

    });

});

Answer 2

$('#record_653 input:radio').each(function() {
    $(this).data('isChecked', $(this).is(':checked'));

    $(this).click(function() {
        if ( $(this).is(':checked') !== $(this).data('isChecked') ) {
            // do changed action
        } else {
          $(this).data('isChecked', !$(this).data('isChecked') );
        }
    })

});

Este foi complicado de fazer na minha cabeça, mas eu acho que você quer algo como isto.

Answer 3

Como foi sugerido por meder e Ken Browning , acabei usando dados do jQuery () para armazenar o valor anterior e verificar contra-lo em cada clique.

Armazenar um "estiver marcada" boolean para cada rádio de entrada é uma solução. No entanto, você precisa manter esse valor. Assim, no manipulador de eventos clique, além de alterar o "estiver marcada" da entrada atual, você precisa encontrar a entrada que foi previamente verificada e alterar seus dados "estiver marcada" para falsa.

O que eu escolhi para fazer em vez disso foi à loja, no elemento pai, o objeto atualmente marcada. Então meu código é algo como:

$(document).ready(  
    function()  {
        // find the checked input and store it as "currChecked" for the record
        $("#record_653").data("currChecked", 
                             $(this).find("input:radio:checked")[0]);
        // add the click event
        $("#record_653").click( function(event) {
                 if ($(event.target).is("input:radio") && 
                     event.target !== $(this).data("currChecked")) 
                 {
                    $(this).data("currChecked", event.target);
                    handleChangeEvent(event);
                 }
            });

        });
    }
);

Graças

Answer 4

Eu tive o mesmo problema, mas com FF eu consegui lidar com isso usando o evento onchange em vez do onclick.

Este é exatamente o que eu estava procurando para lidar com IE7. Funciona como um encanto! Obrigado pela solução detalhada!