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

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

javascript jquery html

试图阻止Javascript在页面加载时运行,javascript,jquery,html,Javascript,Jquery,Html,我正在尝试将onChange事件处理程序添加到html页面的两个元素中。不幸的是，当页面加载时，事件正在触发，这导致了下游问题 $("#Division").on('click', onChangeFilter()); $("#Program").change(onChangeFilter()); function onChangeFilter() { alert("Fired to soon...."); }; 用于测试的关联HTML如下所示 <script src="http

我正在尝试将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>


试验
选择部门
项目1
项目2
项目3

添加.change事件是否会导致“更改”并触发函数？我能找到的两个最近的帖子已经找到了，但我觉得它们的问题更加透明。在这一过程中，我看不出有什么明显的迹象表明这种行为。在我的课程工作中，我刚刚开始过渡到网络世界，也许我没有正确理解页面加载DOM的动态。我认为这一页很有用，但不确定准确程度。提前感谢您的指导

每次使用

onChangeFilter

后，您都需要删除调用括号：

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

这将函数视为任何其他（对象）值，并将其作为参数传递给

.on（）

和

.change（）

，以供它们使用，并在触发事件时调用

否则，使用括号首先调用函数，其

返回值将传递给.on（）
和.change（）
，类似于：
var result1 = onChangeFilter();
$("#Division").on('click', result1);

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

当你这样写的时候：
$("#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>

你在叫它。方法名后面的（）表示您正在调用它。只需在那里写下方法名
代码应该是这样的：
$("#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>


试验
$（文档）.ready（函数（）{
var onChangeFilter=函数（evt）{
警惕（“立即开火…”；
};
$（“#分割”）。在（'click'，onChangeFilter）上；
$（“#程序”）。on（'change'，onChangeFilter）；
});
选择部门
项目1
项目2
项目3
为什么有两个ID相同的元素除法
？删除调用括号--$（“#除法”）。在（'click'，onChangeFilter）上。这将把函数本身作为引用传递，稍后由事件调用。@Xufox，在本例中忘记指定这是一个选择Div，已更新。谢谢你指出这一点。谢谢你的例子和上面的评论。这是有道理的。