jquery - jQuery でタグの Css が変更されないか、タグが見つからない可能性があります

Question

私が使用する以下のコードがありclone()ますdelegate()。コードは、リンク付きの jQuery UI ダイアログに読み込まれています。問題は Ajax が適切にトリガーされていることであり、想定どおりに成功メソッドを呼び出しますが、Ok または noOk div のいずれも表示されていません。つまり、アラートはトリガーされますが、div の css は変更されません。私の問題はどこにあると思いますか? ? セレクターに何か問題がありますか？ありがとう

    <input id="TaskId" name="TaskId" type="hidden" value="18" />
    <div id="MainDiv">
        <div id="toClone">
            <div style="display: inline;">
                <select id="Tasksess">
                    <option value="">لطفاً کار را انتخاب کنيد</option>
                    <optgroup label="کار های جديد">
                            <option value="16"style="">q3fe</option>
                            <option value="18"style="">fjhv j</option>
                            <option value="19"style="">wref</option>
                            <option value="25"style="">ff</option>
                    </optgroup>
                    <optgroup label="کار های در دست اقدام">
                            <option value="13"style="">rr</option>
                            <option value="15"style="">yy</option>
                    </optgroup>
                    <optgroup label="کار های تمام شده">
                            <option value="14"style="">tt</option>
                            <option value="18"style="">fjhv j</option>
                    </optgroup>
                </select>
            </div>
            <div style="display: inline;">
                <select id="Statusess" name="Statusess">
                    <option value="">لطفاً وابستگی را انتخاب کنيد</option>
                    <option value="1">پيشنياز</option>
                    <option value="2">همنياز</option>
                </select>
            </div>
            <div style="display: none;" id="Ok">
                ok
            </div>
            <div style="display: none;" id="noOk">
                تکراری
            </div>
            <div id="loadingGif" style="display: none;">
                <img src="/Content/Images/ajax-loader/253L.gif" alt=""/>
            </div>
        </div>
    </div>
    <script type="text/javascript">
        $(document).ready(function () {

            var Maindiv = $("#MainDiv");
            var toClone = $("#toClone");

            //$("#Statusess").each(function () {
                $("#MainDiv").delegate('#Statusess', 'change', function () {
                    if ($(this).find(":selected").val() != "") {                    
                        if ($(this).parent().prev().find(":selected").val() != "") {
                            $(this).parent().parent().find("#loadingGif").attr("style", "display: inline;");
                            $.ajax({
                                url: '/ProjectAdmin/Project/AddTaskDependency?MainTaskId=' + $("#TaskId").val() + '&DependentTaskId=' + $(this).parent().prev().find(":selected").val() + '&Status=' + $(this).find(":selected").val(),
                                type: 'GET',
                                success: function (data, status) {
                                    if (data != "0") {
                                        $(this).parent().parent().find("#Ok").css('display', 'inline');
                                        $(this).parent().parent().find("#noOk").css('display', 'none');
  alert("1");
                                    }
                                    else if (data == "0") {
                                        $(this).parent().parent().find("#Ok").css('display', 'none');
                                        $(this).parent().parent().find("#noOk").css('display', 'inline');
  alert("2");
                                    }
                                    var div = $('div:eq(0)', Maindiv).clone();
                                    Maindiv.append(div);
                                }
                            });
                            $(this).parent().parent().find("#loadingGif").attr("style", "display: none;");

                        }
                    }
                });
            //});

        });
    </script>

score 1 · Accepted Answer

これが問題だとは断言できませんが、間違いなく修正すべき問題です。私があなたのコードを正しく理解していれば、あなたは#toClonediv を複製しています。#Okただし、その div 内には、およびを含む id を持つ多数の子がいます#noOk。Idはページに固有のものであると想定されているため、クローンを作成すると、固有のアイテムはなくなります。したがって、それらをすべてクラスに変更する必要があります。

id="toClone"にclass="toClone"
id="Tasksess"にclass="Tasksess"
id="Statusess"にclass="Statusess"
id="Ok"にclass="Ok"
id="noOk"にclass="noOk"
id="loadingGif"にclass="loadingGif"

Ok(ただし、、noOk、およびを実際にdivloadingGifの子にしtoCloneたいのか、それとも単にの一意の子にしたいのかは疑問MainDivです。コードはそう思われます。後者の場合は、クロージングを変更する必要があります。 div</div>のタグを使用して、一意の、、および要素toCloneをラップしないようにします。このような場合、これらの一意の子の ID を残すことができます。)OknoOkloadingGif

変更したら、残りのコードを変更して、ID ではなくクラスを選択する必要があります。新しいクローンの子である特定のクラスにも適用されます。クローンによって作成された複数の id アイテムが原因で jquery がアイテムを見つけられない可能性があるため、クラスに変更すると問題が解決する場合があります。

score 1 · Accepted Answer

あなたの主な問題はセレクターにあると思います。追加のアラートを追加して、参照ごとに値を吐き出して、どこで問題が発生したかを確認できます。

私はその方法にイライラしたので、セットアップにいくつかの変更を加え、(AskTaskDependancy ファイルがないとテストできない ajax 部分を除いて) 期待どおりに動作するようにしました。

まず、jsFiddle

注：すべてのテキストを英語に変更しました。これはあなたのコードには関係ありません。私は英語以外で読み書きができないので、コードには影響しないので、自由に元に戻してください。

変更ログ

aの値が空alert()の場合のエラー s を追加しましたselect
$(this).find(":selected").val()単純に$(this).val()
camelCase への参照名のいくつか
MainDiv 内のすべての ID をクラスに
クラス名をselect要素からそれぞれを保持するdivに移動しました
.parent.prev()to .parent.children(".tasksess")(および他の要素の同様の参照スキーム)
各 div/select を簡単に参照できるように var を設定します
css() を attr() に変更 (ok/notOk の非表示/表示用)
読みやすくするために、別の行に ajax URL を作成しました。
ajax リクエストの外側に移動しclone()て、それが機能することを確認しました (必要に応じて自由に元に戻してください。最初に非表示にしない場合、各コピーに表示されたままの loadingGif に注意してください)。
テスト用の ajax リクエストをコメントアウトしました

新しい HTML

<input id="TaskId" name="TaskId" type="hidden" value="18" />
<div id="MainDiv">
    <div class="toClone">
        <div class="tasksess" style="display: inline;">
            <select name="tasksess">
                <option value="">Select a Task</option>
                <optgroup label="Group 1">
                        <option value="16"style="">q3fe</option>
                        <option value="18"style="">fjhv j</option>
                        <option value="19"style="">wref</option>
                        <option value="25"style="">ff</option>
                </optgroup>
                <optgroup label="Group 2">
                        <option value="13"style="">rr</option>
                        <option value="15"style="">yy</option>
                </optgroup>
                <optgroup label="Group 3">
                        <option value="14"style="">tt</option>
                        <option value="18"style="">fjhv j</option>
                </optgroup>
            </select>
        </div>
        <div class="statusess" style="display: inline;">
            <select name="statusess">
                <option value="">Select a Status</option>
                <option value="1">opt8</option>
                <option value="2">opt9</option>
            </select>
        </div>
        <div class="ok" style="display: none;">
            Everything looks good!
        </div>
        <div class="notOk" style="display: none;">
            Something went wrong!
        </div>
        <div class="loadingGif" style="display: none;">
            Loading...
            <img src="/Content/Images/ajax-loader/253L.gif" alt=""/>
        </div>
    </div>
</div>

新しい jQuery/JavaScript

$(document).ready(function () {

    var Maindiv = $("#MainDiv");
    var toClone = $(".toClone");

    $("#MainDiv").delegate('.statusess', 'change', function () {
        var thisSel = $(this).children("select");
        var prevSel = $(this).parent().children(".tasksess").children("select");
        var divOk = $(this).parent().children(".ok");
        var divNotOk = $(this).parent().children(".notOk");
        var divLoad = $(this).parent().children(".loadingGif");

        if (thisSel.val() != "") {
            console.log("status changed to val " + thisSel.val());
            if (prevSel.val() != "") {
                console.log("task is val "+prevSel.val());

                divLoad.attr("style", "display: inline;");
                var url = '/ProjectAdmin/Project/AddTaskDependency';
                url += '?MainTaskId=' + $("#TaskId").val();
                url += '&DependentTaskId=' + prevSel.val();
                url += '&Status=' + thisSel.val();
                console.log("URL= "+url);
                /*
                $.ajax({
                    url: url, type: 'GET',
                    success: function (data, status) {
                        if (data != "0") {
                            divOk.attr("style","display:inline;");
                            divNotOk.attr("style","display:none;");
                        }
                        else if (data == "0") {
                            divOk.attr("style","display:none;");
                            divNotOk.attr("style","display:inline;");
                        }
                    }
                });
                */
                divLoad.attr("style", "display: none;");
                var div = $('div:eq(0)', Maindiv).clone();
                Maindiv.append(div);

            } else { alert("Select 1 val is empty"); }
        } else { alert("Select 2 val is empty"); }
    });

});

score 0 · Accepted Answer

次の行は正しくありません。

$$("#MainDiv").delegate('#Statusess', 'change', function () {

に変更$$("#MainDiv")し$("#MainDiv")ます。

jquery - jQuery でタグの Css が変更されないか、タグが見つからない可能性があります

3 に答える 3

Related

Reference