0

クリックされた要素の祖先の 1 つにクラス「textbox」があり、どの祖先にもクラス「mceExternalToolbar」がない場合、特定のアクションを実行する必要があります。オブジェクトに親「mceExternalToolbar」がある場合、親「textbox」があることはほぼ確実ですが、その逆は当てはまりません。

私はこれを使用しています：

$('#content').click(function(e){
var $eparent = $(e.target).closest('.textbox');
var $etoolbar = $(e.target).closest('.mceExternalToolbar');

// what's wrong with this if condition?
if($eparent.length==1 && !$etoolbar.length)
{
   //do something
}
});

私はそれが十分に単純だと思っていましたが、うまくいかないようです。$etoolbar == NULL有効なjqueryではありませんが、条件で使用すると、条件は少なくとも初めて実行されます(ただし、コンソールでエラーが発生します)。

私のロジックや jQuery の使用方法に何か問題がありますか?

編集

以下に HTML コードを示します。簡単に説明します。

テキスト ボックスを動的に作成するコンテンツ ボックスがあります (それぞれに tinyMCE リッチ テキスト エディターを使用しています)。テキストボックスが「アクティブ化」される場合があります (つまり、tinyMCE は、クラス「mceExternalToolbar」の div を含む、テキストボックス要素内に一連の要素を作成します)。ユーザーは大きなコンテンツ div のどこでもクリックできますが、クリックした場合のみです。テキストボックスは、特定のアクションを実行したいですか。さらに、クリックがテキストボックスの mceExternalToolbar 領域にない場合にのみ、クリックを楽しませます。

<div id="content" style="top:195px; position:absolute; height:300px; width:600px;border: 1px solid black;">

    <!-- THE BOX BELOW WAS CREATED DYNAMICALLY -->
    <div id="textbox_1" class="textbox" style="top: 101px; left: 112px; cursor: move;" aria-disabled="true">
        <div id="textbox_1_menu" class="menu"> <!-- menu items --> </div>
        <div id="textareacontainer_1" class="textareaedit">
            <textarea id="textarea_1" class="tinymce" style="display: none;" aria-hidden="true">
                <p>Testing this textbox</p>
            </textarea>
            <span id="textarea_1_parent" class="mceEditor defaultSkin" role="application" aria-labelledby="textarea_1_voice"></span>
            <div style="position:relative">
                <!-- THIS HERE IS THAT PARENT WHO, IF ANY OF ITS CHILDREN ARE CLICKED, I WILL NOT ENTERTAIN IT -->
                <div id="textarea_1_external" class="mceExternalToolbar" style="display: block; top: -28px;">
                    <a id="textarea_1_external_close" class="mceExternalClose" href="javascript:;"></a>
                    <table id="textarea_1_tblext" cellspacing="0" cellpadding="0">
                        <tbody>
                            <tr role="presentation">
                                <td class="mceToolbar mceLeft" role="presentation">
                            </tr>
                        </tbody>
                    </table>
                </div>
            </div>
        </div>
        <!-- END CONTENT BOX -->
    </div>
</div>
4

2 に答える 2

1

ロジックを単純化すると、.textboxの子孫ではないものがすべて必要になります.mceExternalToolbar。

tinyMCEを生成した後にこれを試してください：

$('#content .textbox:not(.mceExternalToolbar .textbox)').click(function() {
    //do stuff
});​

フィドル

または、「動的に追加」と言ったように、イベントの委任が必要な場合はこれを行います（ほとんどのプラグインの初期化は同期的であることに注意してください）。

$('#content').on('click', '.textbox:not(.mceExternalToolbar .textbox)', function() {
    //do stuff
});​

フィドル

要素がクリックされると、クリックイベントは.textbox、リスナーをアタッチした要素にバブルアップします。これには、の子孫は含まれません.mceExternalToolbar。

このように、リスナーが直接バインド（最初のコード）を介して接続されている、または委任されたイベントのセレクターと一致する（2番目のコード）子孫は、クリックされると、祖先.textboxを確認せずにハンドラーをトリガーします。.textbox

于 2012-09-08T11:13:09.647 に答える
1

私が収集したものから、ユーザーが実際に の textarea 部分をクリックしたときにのみ、クリック イベントが必要です#content。私が間違っている場合は修正してください。

$('#content').on('click', 'textarea', (function(e)
{
    e.stopPropagation() // Stops click event bubbling up to other elements

    // Execute code, this will only be run if a user
    // Clicks on a 'textarea' element within `#content`
});

if ステートメントの何が問題なのかを尋ねました。!$etoolbar.lengthnull または未定義の長さを持つ要素の適切なチェックではありません。変数の存在を確認したい場合は、代わりにこれを使用できます。

if ( typeof $etoolbar !== 'undefined' )
{
    // Do stuff with $etoolbar
}
于 2012-09-08T10:54:28.470 に答える