コンテンツを非同期に読み込むときにJavaScriptが自分の関数を認識しませんか？

Question

テキストに "read more" -click関数が必要です。私は動的に特定のキーワードのためのWikipediaのテキストを読み込むと、この機能を持っている：あなたはelse if一部で見ることができるように

function setText(text, lang, full) { 
    setTimeout(function() { $('#loading').fadeOut('fast'); }, 300); 
    var mylang = '<?= $_SESSION['lang']; ?>'; 
    if (mylang != 'en' && lang == 'en') 
     var AppendText = '<span class="db f09 grey mt10"><?= __('TEXT_ONLY_ENGLISH'); ?></span>'; 

    console.log(lang); 

    if (full) { 
     $('#text').html('<?= __('EMPTY'); ?>'); 
     setTimeout(function() { $('#text').fadeIn('fast'); }, 500); 
    } else if (text) { 
     // Full Text 
     function fullText() { 
      console.log('yes'); 
      setText(text, lang, 1); 
     } 

     text = text.length > length ? text.substring(0, length - 3) + 
     '... <a class="cp" onclick="fullText()"><?= __('MORE') ?></a>' : text; 
     $('#text').html(text).append(AppendText); 
     setTimeout(function() { $('#text').fadeIn('fast'); }, 500); 
    } 
}; 

私はアンカータグ上にonclickの設定fullText()機能を定義しました。私はそれをクリックすると常にfullText is not definedというメッセージを受け取ります。全文は

Sometextの代わりに表示されますので は、私はちょうど、1に変数fullセットと同じsetText()機能を再呼び出したい...（もっと）は

は、これは、 ajaxを使用せずに可能ですか？どのようなオプションがありますか？

PS：すでにfullText()の代わりにsetText()を呼び出してみましたが、それも定義済みの関数として認識されません。 function fullText()がsetTextにローカルなので

Answer 1

onclick属性では、グローバルスコープ内にある関数のみを参照できます。この問題を回避するには、onclick属性を使用する代わりに、イベントハンドラを動的にアタッチすることができます。それを成し遂げるために

、私はいくつかの変更を示唆し、次のコードにそのリード：あなたは変数lengthの定義を提供していませんでしたが、私はそれがに利用可能であると仮定

function setText(text, lang, full) { 
    setTimeout(function() { $('#loading').fadeOut('fast'); }, 300); 
    var mylang = '<?= $_SESSION['lang']; ?>'; 
    // change 1: define an element with jQuery 
    var $appendText = $('<span>'); 
    if (mylang != 'en' && lang == 'en') 
     $appendText.addClass('db f09 grey mt10').text('<?= __('TEXT_ONLY_ENGLISH')?>'); 

    console.log(lang); 

    if (full) { 
     // change 2: use text(), not html() 
     $('#text').text('<?= __('EMPTY'); ?>'); 
    } else if (text) { 
     // Full Text 
     // Change 3: define link as jQuery element: 
     var $link = $('<a>'); 
     if (text.length > length) { 
      text = text.substring(0, length - 3); 
      $link.addClass('cp').text('<?= __('MORE') ?>'); 
      // Change 4: attach click handler here: 
      $link.click(function fullText() { 
       console.log('yes'); 
       setText(text, lang, 1); 
      }); 
     } 
     // Change 5: append these jQuery elements, which can be empty: 
     $('#text').text(text).append($link).append($appendText); 
    } 
    // Change 6: move this out of the if-block, as it is the same for both cases: 
    setTimeout(function() { $('#text').fadeIn('fast'); }, 500); 
}; 

注意関数。

Answer 2

イベントはグローバルスコープで実行され、クリックすることによってそれを内部HTMLを使って要素を追加しないでくださいfullText() を知っているが、行いませんcreateElement

何かのように：

var hr = document.createElement("A"); 
hr.className="cp"; 
hr.onclick= function { 
      console.log('yes'); 
      setText(text, lang, 1); 
     } 
$('#text').appendChild(hr) 

はクロージャを作成し、問題を解決します。

Answer 3

編集：上記以外の回答は、jQueryを利用して意味を成しているため、より優れています。私の部分的な解決策（私が行った編集のみ）はjQueryに依存しません。

このような何か試してみてください：

var fullText; 
function setText(text, lang, full) { 
    setTimeout(function() { $('#loading').fadeOut('fast'); }, 300); 
    var mylang = '<?= $_SESSION['lang']; ?>'; 
    if (mylang != 'en' && lang == 'en') 
     var AppendText = '<span class="db f09 grey mt10"><?= __('TEXT_ONLY_ENGLISH'); ?></span>'; 

    console.log(lang); 

    if (full) { 
     $('#text').html('<?= __('EMPTY'); ?>'); 
     setTimeout(function() { $('#text').fadeIn('fast'); }, 500); 
    } else if (text) { 
     // Full Text 
     fullText = function() { 
      console.log('yes'); 
      setText(text, lang, 1); 
     } 

     text = text.length > length ? text.substring(0, length - 3) + 
     '... <a class="cp" onclick="fullText()"><?= __('MORE') ?></a>' : text; 
     $('#text').html(text).append(AppendText); 
     setTimeout(function() { $('#text').fadeIn('fast'); }, 500); 
    } 
}; 

O_Zはそのfunction fullTextにのみsetText()のインスタンス内で定義され、彼の答えで正解です。 function setText内のどこからでもこの関数を呼び出すと、通常は期待通りに動作しますが、fullText()をグローバルonclickハンドラからHTMLコードを記述することで呼び出しているため、setText()の特定のインスタンスについてのヒントはありません関連するfunction fullText。

この解決方法には、関連ドキュメントがロードされる前にsetText()が複数回呼び出された場合、最新のドキュメントのみが参照され、両方が参照されるという大きな問題があります。これを解決するには、実際に異なるfullText関数を格納するグローバル配列を作成し、実行する配列内のどのインデックスをHTMLに書き込んだ後、配列から格納された関数を削除しますメモリーリーク）。以下の別の例があります：

var fullTextFunctions = []; 
function setText(text, lang, full) { 
    setTimeout(function() { $('#loading').fadeOut('fast'); }, 300); 
    var mylang = '<?= $_SESSION['lang']; ?>'; 
    if (mylang != 'en' && lang == 'en') 
     var AppendText = '<span class="db f09 grey mt10"><?= __('TEXT_ONLY_ENGLISH'); ?></span>'; 

    console.log(lang); 

    if (full) { 
     $('#text').html('<?= __('EMPTY'); ?>'); 
     setTimeout(function() { $('#text').fadeIn('fast'); }, 500); 
    } else if (text) { 
     // Full Text 
     fullTextFunctions.push(function fullText() { 
      console.log('yes'); 
      setText(text, lang, 1); 
     }) 

     text = text.length > length ? text.substring(0, length - 3) + 
     '... <a class="cp" onclick="fullTextFunctions[' + (fullTextFunctions.length - 1) + ']()"><?= __('MORE') ?></a>' : text; 
     $('#text').html(text).append(AppendText); 
     setTimeout(function() { $('#text').fadeIn('fast'); }, 500); 
    } 
}; 

function releaseFullTextFunction(index) { 
    fullTextFunctions[index] = null; 
}