Question

我试图将onChange事件处理程序添加到我的html页面的两个元素中。遗憾的是，当页面加载导致下游问题时，事件就会触发。

$("#Division").on('click', onChangeFilter());
$("#Program").change(onChangeFilter());

function onChangeFilter() {
   alert("Fired to soon....");
};

用于测试的相关HTML看起来像这样

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Test</title>
</head>
<body>
   <div id="DivisionSelection">
     <select id="Division" data-filterprogramcontrol="Program">
       <option value="-1">Select Division</option>
       <option value="1">Item 1</option>
       <option value="2">Item 2</option>
       <option value="3">Item 3</option>
     </select>
  </div>    
</body>
</html>

添加.change事件会导致更改＆＃39;并触发功能？我能找到的两篇最接近的帖子位于here和here，但我觉得他们的问题更加透明。 jQuery API中没有任何迹象表明这种行为。我刚开始在课程中转换到网络世界，也许我没有正确理解页面如何加载DOM的动态。我认为this页有用，但不确定准确度如何。提前感谢您的指导。

Answer 1

您希望在每次使用onChangeFilter后删除调用的括号：

$("#Division").on('click', onChangeFilter);
//                                      ^^
$("#Program").change(onChangeFilter);
//                                ^^

将该函数视为任何其他（对象）值，将其作为参数传递给.on()和.change()以供它们使用，并在事件被触发时调用它们

否则，使用括号，首先调用函数，然后将其return值传递给.on()和.change()，类似于：

var result1 = onChangeFilter();
$("#Division").on('click', result1);

var result2 = onChangeFilter();
$("#Program").change(result2);

Answer 2

当你这样写：

$("#Division").on('click', onChangeFilter());

你打电话给它。方法名称后的（）表示您正在调用它。只需在那里写出方法名称。

更多的代码应该是这样的：

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Test</title>
<script>
    $(document).ready(function() {
        var onChangeFilter = function(evt){
           alert("Fired to soon....");
        };
        $("#Division").on('click', onChangeFilter);
        $("#Program").on('change', onChangeFilter);

    });
</script>
</head>
<body>
   <div id="Division">
     <select id="Program">
       <option value="-1">Select Division</option>
       <option value="1">Item 1</option>
       <option value="2">Item 2</option>
       <option value="3">Item 3</option>
     </select>
  </div>    
</body>
</html>

试图阻止Javascript在页面加载时运行

2 个答案: