Question

我有一个动态添加的行表，但由于某些原因，当我更改select的值时，on()事件似乎无法触发。

为简单起见，我写了以下jsFiddle。这是我正在做的非常简单的例子。我必须注意，我无法验证jsFiddle在IE7中是否以相同的方式失败，因为jsFiddle似乎根本不能在IE7中工作。

我的代码的基础是这个......

首先，页面加载了这些行中的一个或多个，这些行表示复杂的＆＃34;子表单＆＃34;发布到Spring MVC。该子表单包含一组5个SELECT标记，其顶部TABLE附加了一个事件处理程序：

$('#parentTable').on('change', 'div.additional div[class^="additional"] select', function() {
    // ...enable/disable siblings according to value
}

表格底部是添加按钮。当用户单击它时，我将获取最后一个可见行，克隆它，使用正则表达式来修复名称/ id上的索引，并将所有字段设置为空白并禁用除一个字段之外的字段进行查找。这一切都有工作的外观。

用户在查找字段中输入一个值，单击查找，执行AJAX调用，填写子表单，然后调用选择的更改以设置其默认状态，如下所示：

$subTable.find(':input:not(:button)').change();

这会按预期激发上述on()。但是，如果我实际点击生成的SELECT并更改其值，则不会调用on()事件处理程序。

我已经验证了生成的克隆表行看起来/气味/感觉正确，至少从使用IE8的开发人员工具（我在IE7的IE7兼容模式下进行测试，因为IE7有非常有限的测试和问题）似乎也出现在那里）。当我在Chrome中运行它时它完全正常，但我知道克隆在技术上的工作方式不同。

任何帮助都将不胜感激。

更新

我尝试交换选择器以删除类attr，如下所示：

$('#parentTable').on('change', 'div.additional div select', function() {
    // ...enable/disable siblings according to value
}

我尝试了所有上限，如引用的帖子：

$('#parentTable').on('change', 'div.additional div[class^="ADDITIONAL"] select', function() {
    // ...enable/disable siblings according to value
}

第一种工作方式相同，第二种工作完全没有（禁用所有on()更改处理）。

在我开始工作之前，我会继续玩这个游戏。这里必须有一些简单的错误。

更新2

I tried adding a class to all the `SELECT`s, and added the following two:
$('select.addedClass').on('change', function() {
    alert("Select change:" + $(this).val());
});
$('#parentTable').on('change', 'select.addedClass', function() {
    alert("Select change 2:" + $(this).val());
});

以下是我执行的流程：

重新加载的页面，两个警报都会触发单行
添加了一行
执行AJAX查找，如上所述调用$addedTable.find(':input:not(:button)').change();，两个事件都会触发
更改其中一个选项的值，两个警报都不会触发。

我希望第一个失败，因为事件监听器直接连接到SELECT而不是更高级别的父级，但第二个失败的方式相同。因此，在开发人员工具中，我尝试运行以下内容：

$('#order.itemList1.additionalLine1').change()

我添加的其中一个选项的ID是什么，但仍然没有触发。它好像事件处理程序忽略了所有添加的SELECT。

为了确保select正在on()上运行，我在添加新行后在控制台中执行了此操作：

$('#parentTable').find('div.additional div[class^="additional"] select').each(function() {
    alert($(this).attr('name') + '(' + $(this).prop('id') + ')' + ' : ' + $(this).val());
});

更新3

我最终投入了一个可怕的黑客攻击，仅针对IE7，直接在SELECT上删除并重新添加更改处理程序。它很难看，但我必须支持IE7，所以......

我将此处公开，看看是否有人有更好的解决方案，或者可能知道它为什么不起作用。

Answer 1

问题不在于change事件或select元素上的委派。

这是属性选择器：

div[class^="additional"]

IE7及以下版本不执行属性选择器。

我做了一些搜索，有些人似乎在想this can be solved using case-specific syntax。

jQuery 1.7.2和IE7 on（）似乎没有激发选择

1 个答案: