0

なぜこれが機能しないのかを理解しようとして、約4時間壁に頭をぶつけています. SQL クエリの結果の数に応じてコードを動的に記述する必要があるプログラムがあります。

EasyBoxというjqueryライトボックスを使用しています。このようにハードコーディングすると、次のように機能します。

<body id="body" onload="bodyLoaded()">
<a id="link" href="#test" title="Snowflake" rel="lightbox">Hello</a>
<div id="test" style="display:none; width:320px; height:240px">
    <p>Test Content</p>
</div>    
<script type="text/javascript">
    function bodyLoaded(){
        $('#link').attr('onclick', 'logText("Hello")');
    }
    function logText(message){
        console.log(message);   
    }
</script>

ただし、このようにリンクを動的に記述した場合、EasyBox ポップアップは起動しません。

<body id="body" onload="bodyLoaded()">
<div id="test" style="display:none; width:320px; height:240px">
    <p>Test Content</p>
</div>
<script type="text/javascript">
    function bodyLoaded(){
        document.getElementById('body').innerHTML+="<a id='link' href='#test' rel='lightbox'>Hello</a>";
        $('#link').attr('onclick', 'logText("Hello")');
    }
    function logText(message){
        console.log(message);   
    }
</script>

なぜこれがうまくいくのでしょうか？ここで髪を引っ張ります！

4

2 に答える 2

2

このすべてにjQueryを使用していない理由がわかりません。

$(function(){
   $('#body').prepend("<a id='link' href='#test' rel='lightbox'>Hello</a>");
   $('#link').click(function(){
      alert("Hello");
   });
});

.click() が機能しない場合は、.live() を試すこともできます。どちらもjsfiddle(http://jsfiddle.net/LZxrL/およびhttp://jsfiddle.net/LZxrL/1/ )で機能しました。

また、body 要素自体の ID が「body」であるのに、id='body' の要素がないと誰もが言い続けるのはなぜですか。明らかに、彼は本文へのリンクを追加したいと考えています。

編集：クリックイベントではなく、ライトボックスの問題についての別の投稿へのコメントを読みました。それは物事を変えます。私はそのプラグインに十分に精通しており、正式にコメントすることはできませんが、プラグインはページの読み込み時に rel="lightbox" を探し、その後に追加された要素はキャッチされないのではないかと思います. ほとんどのプラグインには、次のような手動の方法があります。

$('#link').lightbox();
于 2012-11-01T19:27:07.763 に答える
-1

スクリプトで動的タグをロードしている場所がわかりません。bodyLoaded() 関数は id='body' を持つものを探していますが、コードの 2 番目のブロックでは、その id タグを持つものは何も表示されません。

于 2012-11-01T19:10:21.210 に答える