Question

我正在使用带有母版页的ASP.NET 2.0，我想知道是否有人知道某种方法来检测某个<div>或fieldset中的字段何时被更改（例如，标记为“IsDirty”）？

Answer 1

您可以为所有输入绑定Change事件，并将变量标记为true。像这样。

var somethingChanged = false;
$(document).ready(function() { 
   $('input').change(function() { 
        somethingChanged = true; 
   }); 
});

但是，请记住，如果用户更改某些内容，然后更改回原始值，它仍会被标记为已更改。

更新：对于特定的div或fieldset。只需使用给定fieldset或div的id。例如：

var somethingChanged = false;
$(document).ready(function() { 
   $('#myDiv input').change(function() { 
        somethingChanged = true; 
   }); 
});

Answer 2

快速（但非常脏）的解决方案

这很快，但它不会处理ctrl+z或cmd+z，在按shift，ctrl或{时，它会给你一个误报{1}}键：

tab

Test it with this fiddle.

快速（不太脏）的解决方案

这可以防止$('#my-form').on('change keyup paste', ':input', function(e) { // The form has been changed. Your code here. });，shift或ctrl键的误报，但不会处理tab或ctrl+z：

cmd+z

Test it with this fiddle.

完整（不太快）的解决方案

如果您想处理所有个案，请使用：

$('#my-form').on('change keyup paste', ':input', function(e) {

  var keycode = e.which;

  if (e.type === 'paste' || e.type === 'change' || (
      (keycode === 46 || keycode === 8) || // delete & backspace
      (keycode > 47 && keycode < 58) || // number keys
      keycode == 32 || keycode == 13 || // spacebar & return key(s) (if you want to allow carriage returns)
      (keycode > 64 && keycode < 91) || // letter keys
      (keycode > 95 && keycode < 112) || // numpad keys
      (keycode > 185 && keycode < 193) || // ;=,-./` (in order)
      (keycode > 218 && keycode < 223))) { // [\]' (in order))

    // The form has been changed. Your code here.

  }

});

Test it with this fiddle.

Answer 3

一个简单而优雅的解决方案（它实时检测表单元素的变化）：

var formChanged = false;

$('#my-div form').on('keyup change paste', 'input, select, textarea', function(){
    formChanged = true;
});

Answer 4

只是为了澄清，因为问题是“在某个字段集/ div中”：

var somethingChanged = false;
$(document).ready(function() { 
   $('fieldset > input').change(function() { 
        somethingChanged = true; 
   }); 
});

或

var somethingChanged = false;
$(document).ready(function() { 
   $('div > input').change(function() { 
        somethingChanged = true; 
   }); 
});

Answer 5

对于表单，您可以在加载时序列化内容，然后在稍后比较序列化，例如：

$(function(){
    var initdata=$('form').serialize();
    $('form').submit(function(e){
        e.preventDefault();
        var nowdata=$('form').serialize();
        if(initdata==nowdata) console.log('nothing changed'); else console.log('something changed');
        // save
        initdata=nowdata;
        $.post('settings.php',nowdata).done(function(){
            console.log('saved');
        });
    });
});

Answer 6

你可以给fieldset或div一个ID并将change事件绑定到它......事件应该从内部子节点传播。

var somethingChanged = false;
$('#fieldset_id').change(function(e)
{
    // e.target is the element which triggered the event
    // console.log(e.target);
    somethingChanged = true;
});

此外，如果您想拥有单个事件监听功能，可以将更改事件放在表单上，然后检查哪个字段集已更改：

$('#form_id').change(function(e)
{
    var changedFieldset = $(e.target).parents('fieldset');
    // do stuff
});

Answer 7

我在CoffeeScript中提出了这段代码（尚未经过现场测试）：

将类“change_warning”添加到应该观察更改的表单中。
将类“change_allowed”添加到保存按钮。

change_warning.coffee：

window.ChangeWarning = {
    save: ->
        $(".change_warning").each (index,element) ->
            $(element).data('serialized', $(element).serialize())

    changed: (element) ->
        $(element).serialize() != $(element).data('serialized')

    changed_any: ->
        $.makeArray($(".change_warning").map (index,element) -> ChangeWarning.changed(element)).some (f)->f
        # AKA $(".change_warning").any (element) -> ChangeWarning.changed(element)
        # But jQuery collections do not know the any/some method, yet (nor are they arrays)

    change_allowed: ->
        ChangeWarning.change_allowed_flag = true

    beforeunload: ->
        unless ChangeWarning.change_allowed_flag or not ChangeWarning.changed_any()
            "You have unsaved changes"
}

$ ->
    ChangeWarning.save()
    $(".change_allowed").bind 'click', -> ChangeWarning.change_allowed()
    $(window).bind 'beforeunload',     -> ChangeWarning.beforeunload()

Answer 8

.live现已弃用，已替换为.on：

var confirmerSortie = false;
$(document).on('change', 'select', function() {
    confirmerSortie = true;
});

$(document).on('change keypress', 'input', function() {
    confirmerSortie = true;
});

$(document).on('change keypress', 'textarea', function() {
    confirmerSortie = true;
});

Answer 9

以下解决方案对我有用：

＆＃13;

$("#myDiv :input").change(function() { $("#myDiv").data("changed",true);});
}
  
if($("#myDiv").data("changed")) {
console.log('Form data changed hence proceed to submit');  
}
else {
console.log('No change detected!');
}

＆＃13;

由于

Answer 10

如果只需要字段集中的字段，则可以替代Dw7的答案，然后可以在其输入值上调用serialize（）。注意：serialize（）不会拾取没有“名称”属性的任何元素。这同样适用于选择标签。

private String Name;
private String IsBold;
private String IsChronic;
private Integer Pharmacy_Id=null;

public Medicins(String name, String isBold, String isChronic, Integer pharmacy_Id) {
    Name = name;
    IsBold = isBold;
    IsChronic = isChronic;
    Pharmacy_Id = pharmacy_Id;
}

public String getName() {
    return Name;
}

public String getIsBold() {
    return IsBold;
}

public String getIsChronic() {
    return IsChronic;
}

public Integer getPharmacy_Id() {
    return Pharmacy_Id;
}

使用jQuery检测表单中的数据更改

10 个答案:

快速（但非常脏）的解决方案

快速（不太脏）的解决方案

完整（不太快）的解决方案

change_warning.coffee：