1

我有一个显示记录列表的页面。用户可以使用单选按钮选择记录状态，例如：

<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>

我正在使用 JQuery 将用户所做的更改发送回服务器，在那里我使用它们来更新数据库。这是我所做的简化版本：

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

问题在于，即使用户单击之前检查过的相同按钮，此代码也会创建请求。我真正想要的是“on change”事件，除了它在 Internet Explorer 中的行为不是很有用（例如这里）。

所以我想我必须以某种方式确定点击事件是否改变了值。

旧值是否存储在某处（在 DOM 中？在事件中？）所以我可以与之比较？

如果没有，我应该如何存储旧值？

4

4 回答 4

8

旧值没有存储在您可以查询的地方，不。您将需要自己存储该值。您可以使用 javascript 变量、隐藏input元素或 jQuerydata()函数。

编辑

jQuerydata函数提供对键值对数据结构的访问，作为存储给定元素的任意数据的一种方式。api看起来像：

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

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

一个更成熟的想法：

$(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);
        }

    });

});
于 2009-09-28T19:13:13.283 回答
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') );
        }
    })

});

这在我的脑海中很复杂，但我认为你想要这样的东西。

于 2009-09-28T19:19:47.347 回答
0

正如meder和Ken Browning所建议的，我最终使用 JQuery 的 data() 来存储以前的值并在每次点击时检查它。

为每个输入无线电存储“已检查”布尔值是一种解决方案。但是，您需要保持此值。所以在点击事件处理程序中，除了改变当前输入的“被检查”之外，还需要找到之前被检查的输入，并将其“被检查”数据更改为false。

我选择做的是在父元素中存储当前检查的对象。所以我的代码看起来像：

$(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);
                 }
            });

        });
    }
);

谢谢

于 2009-10-01T10:56:40.903 回答
0

我遇到了同样的问题，但是对于 FF，我设法使用 onchange 事件而不是 onclick 来处理它。

这正是我要处理的 IE7。奇迹般有效！感谢您的详细解决方案！

于 2009-11-12T15:20:26.020 回答