2011-02-09 9 views
3

特定の要素をクリックするとdivを非表示のスパンに置き換える関数を作成しました。タグの "onclick =" attrにイベントハンドラがあると、関数はうまくいきました。しかし、私は "ファンシー"を取得し、jQueryの.click()メソッドでonclick attrを置き換えようとしました。今、私がページ上でそれを使用しようとすると、クランク - 何も起こりません。jQuery .click()メソッドが予期したとおりに動作しない

ただし、と同じコードをChromeのjsコンソールで実行すると、うまく動作します。ここに私のjsである:ここでは

$("a#delete").click(function() { 
    $("a#delete").replaceWith($("span.hconf").attr("style", "none")) 
}); 

は、関連するHTMLは(divの内部にある、外である)である:

<a class='modify' id="delete" u="{{ i.id }}" href='#'>delete</a> 
<span class='hconf' style="display:none;">Are you sure? <a class='confirm' id='del_conf_true' onclick='deltrue();' href='#'>yes</a> | <a class='confirm' id='del_conf_false' href='#'>no</a></span> 

私は2番目の$( "#削除" を変更することができます知っています)を "this"キーワードで置き換えますが、問題の一部であるかどうかわからないので、今取り消しておきます。私はjs/jQueryの新人です。

+0

"delete"は識別子かCSSクラスですか? –

+0

「削除」は識別子です。私はHTMLとCSSも新しくなっているので、私はそれを間違ってやっていると確信しています。私はjs logic atmに心配しています。 – mattdeboard

答えて

5

Readyそれ:

$(document).ready(function() { 
    $("a#delete").click(function() { 
     $(this).replaceWith($("span.hconf").attr("style", "display:none")); 
    }); 
}); 

...とあなたのスタイル= "表示:なし" を意味するものではありませんか?あなたは同じように簡単に.hide()を使用することができます。

$("span.hconf").hide(); 

そして最後に、それはIDセレクタにフィルタリングタグを使用して無意味です。ちょうど$("#delete")をやってください、それは短くて速いです。

+0

それは、ありがとう!私は8分で受け入れます。 :) – mattdeboard

+0

また、アップデートのために:(フィルタを使って).hide()と私のコードの冗長性をありがとう。 – mattdeboard

1

このJSはDOMの準備が整う前に実行されていますので、このコードを$(function(){})(DOM対応)ブロックに入れてみてください。

$(function(){ 
    $("a#delete").click(function() { 
    $("a#delete").replaceWith($("span.hconf").attr("style", "display:none")); 
    }); 
}); 

.liveを試してみることもできます。

$("a#delete").live('click', function() { 
    $("a#delete").replaceWith($("span.hconf").attr("style", "display:none")); 
    }); 

注:表示属性を変更する.hide().show()を使用してください。

2

の前にコードがで実行されており、ブラウザで「削除」アンカーのHTMLが表示されます。したがって、あなたのjQueryセレクタ "a#delete"は何も見つからないので、全体的に何も起こりません。

$(function() { $('a#delete').click(function() { /* ... */ }); }); 

初期化コードをドキュメント全体が解析されたポイントに延期することになります。あるいは、スクリプトブロックを<body>の末尾に置くこともできます。

関連する問題