jQuery .change()事件仅触发一次

罗伊

我有一个可以在DOM准备就绪时从数据库检索项目名称的应用程序。每个项目都以<select><option>html的形式添加到<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.");
            });
        }
    }
)};
尖尖的

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

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

在您的代码中,您正在调用“ retrieveProject”函数,并且该函数调用的返回值作为“更改”处理程序传递(当然无效)。这就是为什么事件是在页面加载时生成的。

当您使用函数作为值时,不要()在函数引用之后使用-它是您想要的引用本身(在这种情况下为函数名称)。这就是需要传递给jQuery的东西。

此外-这一点很重要-请确保您的代码在“就绪”或“装载”处理程序要么运行,否则,你<script><select>页面上的元素。如果脚本在文档头中,则它将在解析DOM之前运行,并且将无效。(另一种解决方法是使用.on()另一个答案中建议委托表格。)


更多:<select>在“ 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 = "<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;
    });
}

本文收集自互联网,转载请注明来源。

如有侵权,请联系[email protected] 删除。

编辑于
0

我来说两句

0条评论
登录后参与评论

相关文章

来自分类Dev

更改事件处理程序仅触发一次,jQuery

来自分类Dev

仅触发一次jQuery滚动事件

来自分类Dev

仅触发一次jQuery mousemove事件

来自分类Dev

jQuery Bootstrap Datepicker Click事件仅触发一次

来自分类Dev

更改事件处理程序仅触发一次,jQuery

来自分类Dev

仅触发一次jQuery滚动事件

来自分类Dev

jQuery Mobile vclick事件仅触发一次

来自分类Dev

jQuery animate仅通过keypress事件触发一次

来自分类Dev

单击事件仅触发一次JQuery / bPopup

来自分类Dev

jQuery 单击事件仅触发一次

来自分类Dev

jQuery .change()函数必须仅触发一次

来自分类Dev

仅触发一次jQuery函数?

来自分类Dev

jQuery bind()仅触发一次

来自分类Dev

jQuery .change()仅工作一次

来自分类Dev

带有动画文本的.fadeToggle上的jQuery .click事件仅触发一次

来自分类Dev

jQuery keyUp函数触发多次,即使事件仅发生一次

来自分类Dev

jQuery事件触发一次,然后不再触发

来自分类Dev

jQuery使用keydown / keyup / keypress事件仅触发一次,而不是按住键时触发多次

来自分类Dev

jQuery(window).resize函数仅触发一次,而不是每个像素触发一次

来自分类Dev

jQuery(window).resize函数仅触发一次,而不是每个像素触发一次

来自分类Dev

JQuery 监听多个事件,但只触发一次

来自分类Dev

jQuery触发器一次仅适用于addEventListener指定的一个事件

来自分类Dev

jQuery UI效果.on单击仅触发一次

来自分类Dev

jQuery触发器('click')仅工作一次

来自分类Dev

jQuery on click事件仅起作用一次

来自分类Dev

当我触发事件时,它会触发几次,而不是在jQuery中触发一次

来自分类Dev

jQuery的One-用多种事件类型触发一次

来自分类Dev

使用jQuery添加/删除类事件在Firefox中触发一次CSS3动画

来自分类Dev

jQuery Ajax只需单击一次即可触发2个事件

Related 相关文章

  1. 1

    更改事件处理程序仅触发一次,jQuery

  2. 2

    仅触发一次jQuery滚动事件

  3. 3

    仅触发一次jQuery mousemove事件

  4. 4

    jQuery Bootstrap Datepicker Click事件仅触发一次

  5. 5

    更改事件处理程序仅触发一次,jQuery

  6. 6

    仅触发一次jQuery滚动事件

  7. 7

    jQuery Mobile vclick事件仅触发一次

  8. 8

    jQuery animate仅通过keypress事件触发一次

  9. 9

    单击事件仅触发一次JQuery / bPopup

  10. 10

    jQuery 单击事件仅触发一次

  11. 11

    jQuery .change()函数必须仅触发一次

  12. 12

    仅触发一次jQuery函数?

  13. 13

    jQuery bind()仅触发一次

  14. 14

    jQuery .change()仅工作一次

  15. 15

    带有动画文本的.fadeToggle上的jQuery .click事件仅触发一次

  16. 16

    jQuery keyUp函数触发多次,即使事件仅发生一次

  17. 17

    jQuery事件触发一次,然后不再触发

  18. 18

    jQuery使用keydown / keyup / keypress事件仅触发一次,而不是按住键时触发多次

  19. 19

    jQuery(window).resize函数仅触发一次,而不是每个像素触发一次

  20. 20

    jQuery(window).resize函数仅触发一次,而不是每个像素触发一次

  21. 21

    JQuery 监听多个事件,但只触发一次

  22. 22

    jQuery触发器一次仅适用于addEventListener指定的一个事件

  23. 23

    jQuery UI效果.on单击仅触发一次

  24. 24

    jQuery触发器('click')仅工作一次

  25. 25

    jQuery on click事件仅起作用一次

  26. 26

    当我触发事件时,它会触发几次,而不是在jQuery中触发一次

  27. 27

    jQuery的One-用多种事件类型触发一次

  28. 28

    使用jQuery添加/删除类事件在Firefox中触发一次CSS3动画

  29. 29

    jQuery Ajax只需单击一次即可触发2个事件

热门标签

归档