How Change calling function of onChange event using jQuery

Question

I have this code which can display drop down in div tag of html. In this I have set one function "hello()" to that drop down through jquery but the problem is that its not calling that function.

<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>

ShankarSangoli · Accepted Answer · 2012-03-29 15:50:56Z

4

You need this.

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

answered Mar 29, 2012 at 15:50

ShankarSangoli

69.9k13 gold badges96 silver badges124 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

ShaneBlake · Accepted Answer · 2012-03-29 15:55:56Z

1

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

EDIT :

In case you missed it in all the near-identical answers, your original problem was that you put your function in quotes "hello()" rather than just using the function name to call it (ie hello)...

edited Mar 29, 2012 at 15:55

answered Mar 29, 2012 at 15:49

ShaneBlake

11.1k2 gold badges28 silver badges43 bronze badges

Comments

The Angry Saxon · Accepted Answer · 2012-03-29 15:49:31Z

0

You just need to wrap it in a jquery initialization

$(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");
    }
});

answered Mar 29, 2012 at 15:49

The Angry Saxon

7922 gold badges7 silver badges25 bronze badges

Comments

Curtis · Accepted Answer · 2012-03-29 15:49:52Z

0

Use .change():

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

Also wrap it in the jquery init function to ensure its ran after DOM has fully loaded:

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

answered Mar 29, 2012 at 15:49

Curtis

104k69 gold badges280 silver badges359 bronze badges

1 Comment

Jivings Over a year ago

This will execute the hello function, passing the return value (undefined) to change().

Neil Knight · Accepted Answer · 2012-03-29 15:50:08Z

0

I would suggest that you move:

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

into a document ready function and remove the "s around hello, like so:

$(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"));
});

This will allow the page to load, and then change the attribute.

answered Mar 29, 2012 at 15:50

Neil Knight

48.8k26 gold badges136 silver badges193 bronze badges

Comments

Jivings · Accepted Answer · 2012-03-29 15:50:32Z

0

You're using jQuery. There's a shortcut for most things. It should be:

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

or

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

It should also be in the document ready function. This is so it doesn't try and attach the event before the elements exist.

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

answered Mar 29, 2012 at 15:50

Jivings

23.3k7 gold badges63 silver badges102 bronze badges

Comments

Anonymous · Accepted Answer · 2015-04-09 21:22:16Z

0

I can't comment, but as the others said. the problem its that you are using $("#sel").attr("onchange", "hello()"); instead of $("#sel").attr("onchange", hello);

This is because in JavaScript a function is a data type. So you have to work with high order functions

If you want to understand better this I'd suggest to learn about functional programming.

Besides that, you should use jQuery methods to add event listeners. In this case $(.'#sel').change(hello);

edited Apr 9, 2015 at 21:22

Anonymous

12.1k7 gold badges37 silver badges58 bronze badges

answered Mar 29, 2012 at 16:02

Jarry

1,9063 gold badges16 silver badges27 bronze badges

Collectives™ on Stack Overflow

How Change calling function of onChange event using jQuery

7 Answers 7

Comments

Comments

Comments

1 Comment

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

7 Answers 7

Comments

Comments

Comments

1 Comment

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related