外部选择组件上的 jquery 更改事件

Question

我有一些选择作为外部组件构建在 php 页面中，然后加载到 html 页面中。例如，我可能会在整个网站的多个地方使用组件“usersList”，因此我的 php 生成此列表，然后我在 jquery 中使用 load 来调用该组件，如下所示:

$("#samaritan").load('usersList.php');

效果很好，我可以在包含的文档中编写 jquery 来获取 usersList 的 val() 。我希望能够导致此列表的更改发生。唯一的问题是，change 事件似乎只想在 jquery 代码与原始组件位于同一页面上时触发。例如，仅当以下代码位于生成选择的 php 页面上时，当我更改选择时，以下代码才会触发带有下拉值的警报。

$("select").change(function() {
                alert("you chose "+$(this).val());
            });

我不想直接将此代码编写到组件页面上，因为我希望在使用它的不同地方其行为有所不同。我尝试过使用 .blur，但得到了相同的结果。有什么想法如何在包含加载到 div 中的选择的文档中的选择上触发更改事件吗？

Answer 1

听起来您正在运行代码以在元素实际添加到 DOM 之前添加处理程序。确保添加处理程序的 jQuery 代码在加载函数完成其工作后执行。当您重新加载列表时，您需要重新应用处理程序。最简单的方法是在加载方法回调中应用处理程序。不幸的是，您无法使用 live handlers因为他们不支持更改事件。

$("#samaritan").load('usersList.php', function() {
    $("select").change(function() {
        alert("you chose "+$(this).val());
    });
});