jQuery .change（）事件只被触发一次

我有一个应用程序，当DOM准备好时，它从数据库中检索项目名称。 每个项目都添加到html

的

。 填充列表后，用户可以选择项目标题，该标题将从特定于该项目的数据库中请求剩余信息。

为了实现这一点，我使用$.change() jQuery方法。 不幸的是，只有在创建元素并将其添加到DOM时才会触发该事件。 从列表中选择另一个项目不会触发事件，因此不会触发$.post()调用。

 $(function(){ getProjects(); var firstLoad = true; $("select").change(retrieveProject); // Removed parenthesis based on answers // On page load, get project names from the database and add them to a Select form element function getProjects() { var selectionList; $.getJSON("php/getProjects.php", function (data) { selectionList = ""; for (var i = 0; i < data.length; i++) { selectionList += "" + data[i].ProjectTitle + ""; } selectionList += ""; }).complete(function() { $('#project-selection-menu').append(selectionList).removeClass('hidden'); firstLoad = false; }); } function retrieveProject() { if ( firstLoad == true ){ alert(firstLoad); // This alert fires return false; } else { alert(firstLoad); // This alert doesn't fire $.post("php/getProjects.php", function (data) { // This should have been "php/retrieveProject.php"! // Do stuff with the returned data }).complete(function() { console.log("Success."); }); } } )}; 

Answer 1

您没有正确设置事件处理程序：

 $("select").change(retrieveProject); 

在您的代码中，您正在调用 “retrieveProject”函数，并且该函数调用的返回值作为“更改”处理程序传递（当然没有任何效果）。 这就是为什么事件是在页面加载时生成的原因。

当您将函数作为值使用时 ，不要在函数引用之后使用() – 它是您想要的引用本身（在本例中为函数名称）。 这就是需要传递给jQuery的东西。

此外 – 这很重要 – 确保您的代码在“就绪”或“加载”处理程序中运行，或者您的位于页面上的元素之后 。 如果脚本在文档头中，那么它将在解析DOM之前运行，并且它将无效。 （另一种处理方法是使用.on()委托表单，如另一个答案所示。）

---

更多：当您在“getProjects”中获取内容时，看起来您正在覆盖元素。 因此，您绝对应该使用委托的表单：

 $(document).on("change", "select", retrieveProject); 

此外，您应该在“getProjects”中使用局部变量：

 function getProjects() { var selectionList; // keep this local to the function - implicit globals are risky $.getJSON("php/getProjects.php", function (data) { selectionList = "
"; for (var i = 0; i < data.length; i++) { selectionList += "" + data[i].ProjectTitle + ""; } selectionList += "
"; }).complete(function() { $('#project-selection-menu').append(selectionList).removeClass('hidden'); firstLoad = false; }); } 

Answer 2

您需要处理事件委派

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

同样在方法retrieveProject旁边删除()

Answer 3

你也可以通过使用以下工作来做到这一点。

 $("select").change(function(){retrieveProject()}); 

要么

 $("select").on('change',function(){retrieveProject()}); 

Answer 4

这是你在找什么？ 要在页面加载后运行getProjects ，只需在$(document).ready()函数中调用它。 您还需要正确设置change处理程序。 请参阅小提琴以供参考。

 var firstLoad = true; getProjects(); $("#selectTest").change(function(){ retrieveProject(); }); // On page load, get project names from the database and add them to a Select form element function getProjects() { $.getJSON("php/getProjects.php", function (data) { selectionList = "
"; for (var i = 0; i < data.length; i++) { selectionList += "" + data[i].ProjectTitle + ""; } selectionList += "
"; }).complete(function() { $('#project-selection-menu').append(selectionList).removeClass('hidden'); firstLoad = false; }); } function retrieveProject() { if ( firstLoad == true ){ alert(firstLoad); // This alert fires return false; } else { alert(firstLoad); // This alert doesn't fire $.post("php/getProjects.php", function (data) { // Do stuff with the returned data }).complete(function() { console.log("Success."); }); } } 

http://jsfiddle.net/trevordowdle/Mf38E/

Answer 5

尝试以下代码

$（document）.bind（’change’，’select’，function（）{retrieveProject（）}）