1

次のコードを検討してください。

$(document).ready(function() {
    $("body").append("<div class='outer'><span class='inner'>Click me</span></div>");
    $("html").click(function(event) {
        var targetClass = event.target.className;
        if ($("." + targetClass).parents().hasClass("outer")) {
            alert("true");
        }
    });
});

そしてHTML：

<div class="outer">
    <span class="inner">
        Click me!
    </span>
</div>

ページのどこかをクリックすると、不明な理由で Firebug がこのエラーをスローします。

ここに画像の説明を入力

これについて面白いことに、これはコンテンツがページに動的に追加された場合にのみ発生します。append ステートメントを削除して、代わりにページ自体に貼り付けると、エラーはスローされず、すべてが正しく機能します。

この異常について説明はありますか？

4

5 に答える 5

2

click-event を に追加するhtmlと、すべての要素がターゲットになる可能性があります。クラスを持たない要素をクリックする$(".")と、このエラーが発生します。

targetClassが空かどうかを確認するだけです。

于 2012-06-16T12:32:22.683 に答える
1

$(".")表示されているコードはChromeで機能しましたが、Smileekが言ったように、クラスを持たない要素をクリックすると実際に行っていることであると言うと、おそらくFirefoxの動作が異なり、これによりエラーが発生します。無効なセレクターです。

しかし、現在発生しているエラーを無視しても、次の行はないと思います。

if ($("." + targetClass).parents().hasClass("outer")) {

あなたが思っていることをやっています。そのクラスを持つすべての要素を検索し、それらの要素のすべての親要素を検索し、.hasClass()` ドキュメント.hasClass()によると、結果として得られる要素のセットを呼び出します。一致した要素には、指定されたクラスが割り当てられます。」要素が 2 つしかないため、表示した html でも機能しますが、...

「クリックされた要素の親にクラス「outer」があるかどうかをテストしたい場合は、これを試してください：

if ($(event.target).parent().hasClass("outer")) {

デモ: http://jsfiddle.net/PCTnS/

それは、あなたがやろうとしていると私が想像することをよりよく反映するだけでなく、エラーを回避します.

于 2012-06-16T12:42:34.057 に答える
0

使用する

$("body").append("<div class=\"outer\"><span class=\"inner\">Click me</span></div>");
于 2012-06-16T12:32:53.477 に答える
0

javascript で本文を変更するため、liveを使用する必要があります。

$("html").live('click', function() {....
于 2012-06-16T12:33:46.460 に答える
0

inner問題は、実際にクリックしたときに、次のことをouter試してみることだと思います。

event.stopPropagation();
var targetClass = event.target.className;
于 2012-06-16T12:35:35.393 に答える