0

私は今朝2時間かけて、jQuery関数がページの一部で機能し、別の部分では機能しない理由を理解しようとしました。

私はついにそれをコンテナの垂直パディングに絞り込みました。

CSSにこれがある場合：

div.collapsiblePanel {
padding: 0px 1%;
}

次に、jQueryを介して、親（.collapsiblePanel）要素を見つけ、そのdivに移動して、子要素を操作できます。ただし、スタイルシートのこの1つだけを次のように変更すると、次のようになります。

div.collapsiblePanel {
padding: 5px 1%;
}

次に、jQueryは親（.collapsiblePanel）を見つけることができますが、子をトラバースすることはできません。

クレイジーだよね？何が起こっているのかについての理論はありますか？私はこれが私のjQueryで何かである必要があると思って頭を悩ませていましたが、最終的にはCSSの問題でした。

リクエストごとに、markup / css/codeのスニペットをいくつか追加します。

（一見）機能していなかった特定のjQuery関数：

function finishUp(ajaxContainer,originalContainer,loadingAlert) {  
    $(ajaxContainer).find("input.btnSave").css("border","3px solid red");
    var saveButtonn = $(ajaxContainer).find("input.btnSave");
    console.log(ajaxContainer);
    console.log(originalContainer);
    console.log(loadingAlert);
    console.log(saveButton);
    $(ajaxContainer).find("input.btnSave").css("border","3px solid red").click(function(){
        alert("you clicked the save button");
        savePanel($(this));
    });

};

これは、前の関数がAJAXを介してコンテンツをロードし、コンテナーを表示した後、この関数が入ってボタンにクリックイベントをアタッチすることです。

ご覧のとおり、そこにはたくさんの追加のロギングコードがあります。CSSの垂直パディングが「0」に設定されている場合、Firebugはそれらのそれぞれの適切なオブジェクト名をログに記録します。CSSの垂直方向のパディングを他のものに変更すると、Firebugで最後のオブジェクト（saveButton）が空/空白として返されます。

HTML：

<div class="ajaxEditPanel editablePanel collapsiblePanel" style="display: block;">       
    <form>
         <fieldset class="sideLabels dividers">
         <legend>Edit Realtionship Information</legend>

              ...the form...
                <div class="formItem formButtons"
                    <input value="save" class="button btnSave" type="button">
                    <input value="cancel" class="button btnCancel" type="button">
                </div>                    
         </fieldset>        
    </form>
 </div>

DIVは以前のjQuery関数によって作成され、コンテンツがロードされていることに注意してください。最初は、まだDOMにロードされていないオブジェクトにイベントをアタッチしようとしたときに、タイミングの問題だと思いました。ただし、同じ機能がページの他の場所で機能する理由は説明されていません。これを機能させる、または機能させないように変更できる1つの変数は、CSSパディングのビットでした。関数currentが機能するページの部分で、コンテナに垂直方向のパディングも追加すると、子要素を選択するjQueryも壊れます。

4

1 に答える 1

0

以前にこれに似たものに出くわしたことがあると思います-JSが要素にバインドするように指示された後、DOMがわずかにレンダリングされるタイミングの問題である可能性があります。あなたの場合、パディングにより、firefoxがそれらdivの s をレンダリングするのに数ミリ秒長くかかるため、バインドするものがなくなる前にバインディングがトリガーされる可能性があります。Firebug はフレーム内のソースをレンダリングするポイントにジャンプインするため、レンダリング プロセスが遅くなる可能性があることも理解しています。

これではないことを確認するにはsetTimeout(function(){ ... }, 500)、バインド コードの周りに a を追加して (おそらく firebug をオフにして)、その後バインドされるかどうかを確認してください。もしそうなら、あなたの問題があります。

もう 1 つの方法は、入力をリンクに変更し、イベント委任を使用してイベントをトリガーすることです。jQuery('.btnSave').live('click', function(){savePanel($('selector>for>panel')); })

于 2009-10-31T01:23:15.593 に答える