Question

我有这个代码可以在html的div标签中显示下拉列表。在这个我已经设置了一个函数“hello（）”到通过jquery下拉，但问题是它没有调用该函数。

<body>
<div id="content"></div>
<script src="http://code.jquery.com/jquery-latest.js"></script>
<script type="text/javascript">

    $("#content").append('<select id="sel" onchange="fly()"><option value="1">Choose Me</option></select>');
    $("#sel").attr("onchange", "hello()");
    alert($("#sel").attr("onchange"));

    function hello() {
        alert("Hello");
    }

    function fly() {
        alert("Go to fly");
    }
</script>
</body>

Answer 1

你需要这个。

$("#sel").change(hello);

Answer 2

$("#sel").attr("onchange", hello);

编辑：

如果你在所有几乎相同的答案中错过了它，你原来的问题是你把你的函数放在引号"hello()"而不是仅使用函数名来调用它（即hello） ...

Answer 3

您只需将其包装在jquery初始化

中

$(function(){
    $("#content").append('<select id="sel" onchange="fly()"><option value="1">Choose Me</option></select>');
    $("#sel").attr("onchange", "hello()");
    alert($("#sel").attr("onchange"));

    function hello() {
        alert("Hello");
    }

    function fly() {
        alert("Go to fly");
    }
});

Answer 4

使用.change()：

$("#sel").change(function(){
   hello();
});

还将它包装在jquery init函数中，以确保在DOM完全加载后运行它：

$(function(){
   $("#content").append('<select id="sel" onchange="fly()"><option value="1">Choose Me</option></select>')
   $("#sel").change(function(){
      hello();
   });
});

Answer 5

我建议你搬家：

$("#content").append('<select id="sel" onchange="fly()"><option value="1">Choose Me</option></select>'); 
$("#sel").attr("onchange", "hello()"); 
alert($("#sel").attr("onchange"));

进入文档就绪函数并删除"周围的hello，如下所示：

$(document).ready(function() {
    $("#content").append('<select id="sel" onchange="fly()"><option value="1">Choose Me</option></select>'); 
    $("#sel").attr("onchange", hello); 
    alert($("#sel").attr("onchange"));
});

这将允许加载页面，然后更改属性。

Answer 6

你正在使用jQuery。大多数事情都有捷径。它应该是：

var hello = function() {
   alert("Hello");
}
$("#sel").change(hello);

或

$("#sel").change(function() {
 alert("Hello");
});

它也应该在文档就绪功能中。这样就不会在元素存在之前尝试附加事件。

$(document).ready(function() {
   // code here
});

Answer 7

我无法评论，但正如其他人所说。问题在于您使用的是$("#sel").attr("onchange", "hello()");而不是$("#sel").attr("onchange", hello);

这是因为在JavaScript中，函数是一种数据类型。所以你必须使用high order functions

如果你想更好地理解这一点，我建议学习函数式编程。

除此之外，您应该使用jQuery方法添加事件侦听器。在这种情况下$(.'#sel').change(hello);

如何使用jQuery更改onChange事件的调用函数

7 个答案: