如何正确地将 <select> 添加到带有 jquery 的页面并让更改事件起作用？

Posted 2023-05-08

【中文标题】如何正确地将 <select> 添加到带有 jquery 的页面并让更改事件起作用？

【英文标题】：How to correctly add a <select> to a page with jquery and let the change event work?

【发布时间】：2010-09-12 03:42:03

【问题描述】：

我目前在一个页面上有多个选择，这些选择是通过使用 jquery 的 ajax 调用动态添加的。

我遇到的问题是我无法让更改事件在添加的选择上起作用，除非我在标签内使用onchange，例如

<select id="Size" size="1" onchange="onChange(this);">

这可行，但我想知道是否有办法让它由 jquery 分配。我试过在$(document).ready 的常用位置使用$('select').change(onChange($(this));，但没有奏效。

我尝试在 ajax 调用之后使用 bind 添加事件，但这也不起作用。

有更好的分配事件的方法吗？

【参考方案1】：

$('select').change(onChange($(this));

您需要了解调用函数和将其作为对象传递之间的区别。函数是 javascript 中的一等对象，它们和其他任何东西一样都是对象，因此它们可以存储在变量中，作为参数传递给其他函数，等等。

您拥有的代码调用 onChange 函数，并将结果提供给 jQuery 的 change 函数。你不想要那个。想法是将函数本身传递给jQuery的change函数，jQuery会在合适的时候调用它。

当你在函数名后面有括号 - () - 时，你就是在调用它。否则，您将其视为对象。所以你打算做的事情可以这样完成：

$('select').change(onChange);

【讨论】：

啊，这就解释了为什么当我发出警报以显示它在做什么时，它返回了一个 jquery 函数。

【参考方案2】：

我遇到了类似的问题，找到了这个解决方案here：

当你做这样的事情时：

$('p').click( function()  alert('blah');  ) 

所有当前存在的 'p' 元素将有一个点击处理程序 随附的。现在，如果您继续添加 其他 'p' 元素到他们的页面 不会将您的点击处理程序附加到它们。你会 需要“重新运行”

$('p').click( function()  alert('blah');  )

关于要附加的新元素 处理程序给他们。

你可能想看看 "LiveQuery" plugin 按原样管理 所有新添加的元素，所以他们得到 先前附加的处理程序 添加时附加到它们 到一个页面。

卡尔·路德

因此，在添加选择后，您必须重复 change() 调用。

【讨论】：

LiveQuery 已从 1.3 开始添加到 jQuery 核心。请参阅docs.jquery.com/Release:jQuery_1.3#Overview 了解更多信息

【参考方案3】：

将选择添加到您的页面后，您需要向其中添加更改事件：

$('#newSelect').change(
    function() 
     
        onChange(this)
    
);

如果你的select都是同一个类，最好先解绑，再重新绑定：

$('.classname').unbind("change");
$('.classname').change(
    function() 
     
        onChange(this)
    
);

【参考方案4】：

感谢大家的帮助，答案有效，但不适用于我正在做的事情。我终于用萤火虫弄明白了。我试图在 ajax 完成它之前分配更改事件（我对这个 ajax 东西很陌生，你可能已经注意到了）。

我在 load() 上添加了分配给回调的事件，现在一切正常。

        $(this).load('ploc002.php', JobNumber: JobNumber, Edit: this.id, function()
        
            // The DOM has been changed by the AJAX call
            // Now we need to reassign the onchange events
            $('select,input').change( function()
            
                onChange(this)
            );
        );