我知道 .change() 可用于检测文档上的更改,但这似乎仅在加载时存在 select 元素时才有效。
我有一个通过 ajax 调用大量选择元素的页面,我需要检测每个选择的更改。
有任何想法吗?
我知道 .change() 可用于检测文档上的更改,但这似乎仅在加载时存在 select 元素时才有效。
我有一个通过 ajax 调用大量选择元素的页面,我需要检测每个选择的更改。
有任何想法吗?
执行此操作的两种常用方法是:
在将元素添加到页面后(从您的 Ajax 成功处理程序中或任何地方).change()
使用适当的选择器调用。
设置附加到页面加载时确实存在的父元素或祖先元素的委托事件处理程序(document
如果没有更近的祖先)。
以下是使用方法创建委托处理程序的.on()
方法:
$("#idOfAncestorThatExistsOnLoad").on("change", "selectorOfDynamicElements", function() {
// do something here
});
当 change 事件冒泡到祖先元素时,jQuery 会自动测试它是否源自与第二个参数中的选择器匹配的元素,并且只有在匹配时才调用处理函数。
一个好的方法是将事件与特定的选择器绑定
$(document).on('change', 'select', handlerFunction);
现在您的事件处理程序已绑定document
但仅影响select
元素。如果您使用 AJAX 加载一些数据,则处理程序将立即使用新的选择。
你可以这样做,
在select
<select name="demo" id="demo" onchange="selectRequest('demo');">
在js
文件中
function selectRequest(id) // id of select
{
var selectVal = $('#' + id).val(); // currently selected
// rest do with the val
}
无需屈服$(document).ready()
这是工作代码,
<html>
<head>
<title>Test</title>
<script src="http://code.jquery.com/jquery-1.9.0.min.js"></script>
<script>
function selectRequest(id) // id of select
{
var selectVal = $(id).val(); // currently selected
alert(selectVal)
// rest do with the val
}
</script>
</head>
<body>
<select name="demo" id="demo" onchange="selectRequest(this);">
<option value='1'>1</option>
<option value='2'>2</option>
</select>
</body>
</html>