异步加载内容时 JavaScript 无法识别我的函数？

Question

我想要在文本上有一个“阅读更多”点击功能。我正在动态加载特定关键字的维基百科文本并具有此功能:

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);
    }
};

正如您在 else if 部分中看到的，我定义了 fullText() 函数，设置为 anchor 标记上的 onclick。当我点击它时，我总是收到消息fullText is not Define。我只想重新调用相同的 setText() 函数，并将变量 full 设置为 1，因此将显示全文的

Sometext... (more)

如果不使用ajax，这可能吗？我有什么选择？

PS:我也已经尝试调用 setText() 本身而不是 fullText()，但这也不会被识别为已定义的函数。

Answer 1

使用onclick属性，您只能引用全局范围内的函数。要解决此问题，您可以动态附加事件处理程序，而不是使用 onclick 属性。

为了完成此任务，我建议进行一些更改，从而生成以下代码:

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);
};

请注意，您没有提供变量length 的定义，但我认为该函数可以使用它。