Question

我的工作代码动态生成一系列输入字段。每行字段属于一个数据库记录，我使用php的动态数组表示法（'[]'）来捕获值。到目前为止一切都很好......

现在我想检查用户已更改的字段（如果有）。

我已经探索了几种方法，我对任何一种方式都开放，但我正在尝试使用jQuery / html5输入事件。我能够找到的所有示例都引用了可能被更改的元素的 id ，但由于我不能（轻松地）为数组中的每个输入生成唯一的id，所以我'我不知道如何发现变化。一旦我将变更检测工作，我需要一种方法来获取并在我的$_POST数据中包含已更改元素的ID。

基本表单结构如下所示：

<form>
    <?php foreach($queryresults as $row) { ?>
        <div class="row">
        <input type="text" name="r_date[]" value ="<?php echo $queryresults[$row]['date']; ?>" >
        <input type="text" name="r_note[]" value ="<?php echo $queryresults[$row]['note']; ?>" >
        <input type="hidden" name="r_id[]" value ="<?php echo $queryresults[$row]['id']; ?>" > //used in the form handling
    <?php } ?>
        </div>
    //the following is not in production, just used to test jquery code
    <input type="text" id="testcase" value ="change this to test jquery"> 
</form>

这个jQuery适用于testcase（仅限！）（上述代码的信用：

此fiddle
此blog post

<script>
$( document ).on('input','#testcase',function() {
if (e.originalEvent.propertyName == "value") {
        console.log("Value changed! - propertychange");
    }
});

$( document ).on("input", "#testcase", function() {
    if (!propertyChangeUnbound) {
        $("#testcase").unbind("propertychange");
        propertyChangeUnbound = true;
    }
    console.log("Value changed! - input");
});
</script>

我尝试在每个输入元素中添加一个类，并用jQuery中的classname替换#testcase，但这不会产生输出。

Answer 1

如果我理解正确，那么最好的方法就是这样：

（另外，仅供参考，您忘记了HTML标记内的PHP标记以回显数据。）

<input type="text" name="r_date[]" value ="<?php echo $queryresults[$row]['date']; ?>" data-orig ="<?php echo $queryresults[$row]['date']; ?>">

现在，您将原始/未更改的数据作为名为data-orig的属性，可以像$('#elem').attr('data-orig')一样访问，您可以使用它来比较它的当前值，您可以使用它来检索$('#elem').val()。

这也是一种很好的方法，因为如果他们更改了值，但是然后将其更改回原始值，则不会将其标记为已更改。因此，如果他们更改字段，然后在浏览器中按Ctrl + Z撤消它，它将不会在您的应用中标记为已更改。

以下是JSFiddle的一个简单示例：http://jsfiddle.net/97A6x/，它显示了使用jQuery绑定更改事件和检测更改。

jquery：检测动态生成的输入的变化

1 个答案: