Question

我知道.change（）可用于检测我的文档中的已更改，但只有在加载时存在select元素时，这似乎才有效。

我有一个页面通过ajax调用多个选择元素，我需要检测每个选择的更改。

有什么想法吗？

Answer 1

执行此操作的两种常用方法是：

在将元素添加到页面后（从Ajax成功处理程序中，或在任何地方），使用适当的选择器调用.change()。

设置附加到父页面或祖先元素的委托事件处理程序，该元素在页面加载时存在（document，如果没有更近的祖先）。

以下是使用.on() method：
创建委派处理程序的方法
$("#idOfAncestorThatExistsOnLoad").on("change", "selectorOfDynamicElements", function() { // do something here });

当更改事件冒泡到祖先元素时，jQuery会自动测试它是否源自与第二个参数中的选择器匹配的元素，并且仅在匹配时调用处理函数。

Answer 2

一种好方法是将事件与特定选择器绑定

$(document).on('change', 'select', handlerFunction);

现在，您的事件处理程序已绑定到document，但仅影响select个元素。如果使用AJAX加载一些数据，处理程序将立即使用新选择。

Answer 3

你可以这样做，

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

如何从ajax加载的内容中检测select的变化

3 个答案: