onchange not working in jquery appendTo()

Question

I am new to jQuery and have been trying to create a dynamic drop-down-menu using select. However I am unable to use onChange in appendTo. Any Suggestions ?

<script>
$(function() {
    var addDiv = $('#content');
    var n = 1;
    jq144('#add_match').live('click', function() {
        $('<p ><select onchange = "showUser(this.value, "select_team_' + (n) + '")" name="select_team_' + (n) + '" id="select_team_' + (n) + '"><option value = "">Team 1</option><option value = "a">A</option> <option value = "b">B</option><option value = "c">C</option></select> </p>').appendTo(addDiv);
    ++n; 
    });
});
</script>

I also tried using on() but am unable to pass parameters to it.

Here is showUser:

<script>
    function showUser(str, select_name) {
        var num = parseInt(select_name.substr(select_name.length - 1));
        alert(num + 1);
        if (window.XMLHttpRequest) {
            xmlhttp=new XMLHttpRequest();
        } else {
           xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
        }
        xmlhttp.onreadystatechange=function() {
            if (xmlhttp.readyState==4 && xmlhttp.status==200) {
                $("select[id='select_team_" + (num + 1) + "']").html(xmlhttp.responseText).selectmenu( "refresh");
            }
        }
        xmlhttp.open("GET","getplayers.php?q="+str.value,true);
        xmlhttp.send();
    }
</script>

Finally I was able to solve the problem using .on().

If you have jQuery already, you should take advantage of `$.GET` — hutchbat, Jun 22 '14 at 09:31

score 0 · Answer 1 · answered Jun 22 '14 at 08:57

Try to replace your click with this:

   jq144('#add_match').live('click', function() {
    $('<p ><select onchange ="showUser(this.value, select_team_"' + (n) + '") name="select_team_' + (n) + '" id="select_team_' + (n) + '"><option value = "">Team 1</option><option value = "a">A</option> <option value = "b">B</option><option value = "c">C</option></select> </p>').appendTo(addDiv);
 ++n; 
 });

This may help you. Your onchange function definition have some invalid string closing quotes.

Thank you for your response. Eventually I did solve it by using .on() — N1204, Jun 22 '14 at 10:29

onchange not working in jquery appendTo()

1 Answers1