Question

我在动态创建的选择中使用它，但该函数未被调用

select.onchange = function(select) {getdetails();};

我使用这种方式，并且从静态按钮的点击调用该函数（我也尝试不将select附加到其DIV容器）

select.addEventListener('change', getdetails());

请帮助谢谢。

Answer 1

以下是执行您所描述内容的工作代码：Live demo here (click).

var select = document.createElement('select');
var option = document.createElement('option');
option.textContent = 'Option 1';
var option2 = document.createElement('option');
option2.textContent = 'Option 2';
select.appendChild(option);
select.appendChild(option2);

select.addEventListener('change', getDetails);
document.body.appendChild(select);

function getDetails(e) {
  console.log('Running!');
}

根据您的评论更新 - 将参数传递给事件监听器：

select.addEventListener('change', function() {
  getDetails(some, params, here);
});

您不能直接调用该函数并传入参数，就像您在此处尝试select.addEventListener('change', getdetails());一样。考虑这个例子：

function getdetails() {
  return 'a';
}
select.addEventListener('change', getdetails());

在上面的代码中，getdetails()的返回值作为回调传递，因此结果相同：select.addEventListener('change', 'a');看看为什么没有调用你的函数？

此外，此方法已过时：

select.onchange = function(event) {
  console.log(event);
};

请改用addEventListener。如果您确实使用它，请注意它接受“event”对象。你不能只是传递你想要的任何东西。如果你需要传递一些东西，那么在那里调用另一个函数并传递你需要的东西，如：

select.onchange = function(event) {
  getdetails(pass, the, params, you, need)
};

更新以确保我很清楚：

请勿将您尝试传递的功能调用为回调!!!!

你这样做（错误）;

elem.addEventListener('change', myFunc());

你需要这样做（右）：

elem.addEventListener('change', myFunc);

现在，为了处理将参数传递给myFunc，你可以这样做：

elem.addEventListener('change', function(e) {
  myFunc(some, parameters, here);
});

或

elem.addEventListener('change', someFunc); function someFunc(e) { myFunc(some, parameters, here); }

onchange事件在按钮单击时触发，而不是在动态创建的select元素上触发

1 个答案:

更新以确保我很清楚：