Question

我有一个应用程序，在DOM准备好时从数据库中检索项目名称。每个项目都会添加到html <select><option>中的<form>。填充列表后，用户可以选择项目标题，该标题将从特定于该项目的数据库中请求剩余信息。

为了达到这个目的，我正在使用$.change() jQuery方法。不幸的是，只有在创建<select>元素并将其添加到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 = "<form><select>";
            for (var i = 0; i < data.length; i++) {
                selectionList += "<option name='prjTitle'>" + data[i].ProjectTitle + "</option>";
            }
            selectionList += "</select></form>";
        }).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的东西。

此外 - 这一点非常重要 - 请确保您的代码在“就绪”或“加载”处理程序中运行，或者<script>在 {{}之后来到 1}}页面上的元素。如果脚本在文档头中，那么它将在解析DOM之前运行，并且它将无效。（另一种处理方法是使用另一个答案中建议的<select>委托表格。）

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

<select>

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

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

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 = "<form><select>";
        for (var i = 0; i < data.length; i++) {
            selectionList += "<option name='prjTitle'>" + data[i].ProjectTitle + "</option>";
        }
        selectionList += "</select></form>";
    }).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（）}）

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

5 个答案: