javascript - 在加载时添加事件

Question

我在使用以下代码注册 change 事件时遇到问题:

var map = function(){

  function addMapTriggers(){
    $("#map_form select").change(getDataWithinBounds);
  }

 return{
  init: function(){
   getDataWithinBounds();
   addMapTriggers();
  }
 };
}();

在 jQuery document.ready 中:

$(function(){
  map.init();
});

所以我得到了我的初始数据，然后每次我更改其中一个选择时，我都会再次获得 map 数据(getDataWithinBounds 发送一个 ajax 调用)。问题是，它不起作用，永远不会添加更改事件。

但是，如果我在控制台中键入 map.init();，它就会起作用。这很奇怪，我不明白有什么区别？我在这里错过了什么？我正在使用完全相同的行为在 Safari 和 Firefox 上对此进行测试。

Answer 1

'map_form' 是您选择的 ID 吗？如果是，那么你应该做

$("#map_form").change(getDataWithinBounds);

“#map_form select”将尝试将更改事件挂接到#map_form 指定的元素中存在的所有选择。

编辑:

又注意到一件事，map.init 并不真正存在。

在您的代码中，map 是一个命名函数，它会立即执行并返回一个具有 init 方法的对象。这并不意味着“map”变量具有 init 方法。

你想尝试这样的事情，

var map = function()
{

    function addMapTriggers()
    {
        $("#map_form select").change(getDataWithinBounds);
    }

    return {
        init:  function()
               {
                    getDataWithinBounds();
                addMapTriggers();
            }
    };
}();

在上面的代码中，您运行了一个匿名函数，该函数返回一个具有 init 方法的对象并将结果分配给 map。现在 map 对象将具有 init 方法，您可以这样做:

$(function()
{
  map.init();
});