0

Visual Studio 2010 / C# 4.0 / MVC 3 / Razor / jQuery 1.5.1 / Google Chrome 21.0.1180.83 m / Windows 7 Enterprise を使用しています

これは、目立たないもの（私が目立たないと思うもの）をコメントアウトした私の正確なコードです。

基本的に私は<input />要素を作成していて、ユーザーがその値を変更した場合に変更イベントをバインドしようとしていますが、イベントはバインドされていないようです。Google Chrome の要素 (Ctrl + Shift + J) を見ると、「イベント リスナー」の下に何も表示されません。

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

テスト用の MVC Web サイトを作成してこれを行うと、うまくいくようです。これはとても不可解です。

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

<input />適切なクラスで要素が表示されているにもかかわらず、最初のアラートが実行されない理由を誰か教えてもらえますか?

編集：

入力要素とともに、テーブルが作成されています。

Chrome インスペクタのスクリーンショット

4

3 に答える 3

0

個人的には、入力フィールドにクラスを追加して、通常のバインディングの代わりに jqueries Live() 関数を使用しようとします。
クラス foo を使用して、onclick をすべての入力にバインドできます。 ライブが気に入らない場合は、
ここでライブに関する情報を参照してください.changeバインディングをすぐに実行せずに、実際の例で行ったように、IDで追加のjqueryセレクターを呼び出すことができますか?

于 2012-08-24T11:28:04.403 に答える
0

これを説明して自由に編集してください。しかし、基本的に私のコード内では、テーブル要素を次のように並べ替えていました。

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

これを削除すると（なぜ持っていたのかわかりません）、うまくいきました。

于 2012-08-24T11:36:23.547 に答える
0

テーブル要素なしで試すことはできますか?

私はあなたがこれをどのように行っているのか疑問に思っています:

append($('<tr />')

私はそれが閉じたテーブル行であると予想し、同様に

append($('<td />')

テーブル構築のこの例を見てください

jQuery でテーブル行を追加する

于 2012-08-24T10:53:53.867 に答える