Home/ Questions/Q 8427041
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-06-10T04:41:25+00:00

I’m using Visual Studio 2010 / C# 4.0 / MVC 3 / Razor /

  • 0

I’m using Visual Studio 2010 / C# 4.0 / MVC 3 / Razor / jQuery 1.5.1 / Google Chrome 21.0.1180.83 m / Windows 7 Enterprise

Here is my exact code with non-salient things (well what I think is non-salient) commented out.

Basically I’m creating an <input /> element and am trying to bind a change event to it if the user changes its value, but the event doesn’t seem to be binding. When I look at the elements in Google Chrome (Ctrl + Shift + J), I do not see anything under “Event Listeners.”

<script type="text/javascript" src="/scripts/jquery-1.5.1.js"></script>

<script type="text/javascript">

$(function () {
// ...

    $('#StoredProcedureName').change(function () {
        // ...

        var parameters = $('#parameters');  // <table id="parameters"></table>

        $.getJSON('@Url.Action(/* */)', {
            // ...
        }, function (data) {
            parameters.empty();
            // ...
            $.each(data, function (k, v) {
                // ...
                parameters.
                    append($('<tr />').
                        // ... Other <td /> elements
                        append($('<td />').
                            append($('<input />').
                                // ...
                                change(function () {
                                    alert("here2"); // This alert isn't happening.
                                }).
                                addClass('testClass'). // This class is showing up though.
                                // ...
                            )
                        )
                    );
            });

            // ...
        });
    });

    // ...
});

</script>

When I make a test MVC website and do this, it seems to work. This is so puzzling.

<!DOCTYPE html>

<html>
<head>
    <title></title>

    <script type="text/javascript" src="../../Scripts/jquery-1.5.1.js"></script>

    <script type="text/javascript">
        $(function () {
            $("#a").append(
                $("<input />").change(function () {
                    alert("here1");
                }).attr('value', 'text')
            );
            $("#b").change(function () {
                alert("here2");
            });
        });
    </script>
</head>
<body>
    <div id="a">
    </div>
    <input id="b" />
</body>
</html>

Can anyone tell me why my first alert isn’t being executed, in spite of the <input /> element showing up, with the proper class?

Edit:

The table is being created, along with the input element:

Screenshot of Chrome inspector

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    Feel free to edit this with an explanation. But basically inside my code I was sorting the table elements like so:

    var options = parameters.children();
options.sort(function (a, b) {
    if (a.text > b.text) return 1;
    else if (a.text < b.text) return -1;
    else return 0
});
parameters.empty().append(options);

    Removing this (I’m not sure why I had it) did the trick.

    • 0