javascript - 如何在 onclick 事件上重新加载 jquery？

Question

我有一个表行，它从 MySQL 检索数据，并且我包含了一个 .onclick 函数，它打开一个包含数据的文本编辑器，但文本编辑器仅打开第一行，而不打开其余行在表中。

这是 jQuery 代码:第一个打开文本编辑器，第二个切换文本编辑器(ckeditor)的文本区域。

<script type="text/javascript">

    $(document).ready(function()
    {
        $(".trClass").click(function()
        {
            var id = $(this).attr('id');
            $('#d_'+id).css("display", "block");
            $('#table_id').css("display", "none");
        });
    }); 

    window.onload = function()
    {
        CKEDITOR.replace("editor1");
    };

</script>

这是表的回显，我使用的是 foreach。

echo '
    <tr class="trClass" id="'.$counter.'">
        <td class="marker">
            <i class="fa fa-align-left"></i>
        </td>

        <td class="title">
            '.$article_title.'
        </td>

        <td class="content">
            '.$article_content.'
            </td>
    </tr>

    <section id="d_'.$counter.'" style="display:none;">
        <textarea id="editor1">
            <div style="width:468px;">
                '.$article_content_full.'
            </div>
        </textarea>
    </section>
';
$counter++;
}

我无法弄清楚如何为每个表加载 CKEDITOR.replace("editor1"); ，我尝试在其中使用 .click 函数，但它不起作用，因为它不起作用加载。问题是，如果单击第一行，它会打开文本编辑器，如果单击第二行，则不会； http://www.goo.gl/dQrLPN

Answer 1

通常是id每个元素的属性应该是唯一的。跨多个元素应用属性通常是通过 class 来完成的。 。知道这一点后，CKEditor 可能只是抓取具有给定 id 的对象的第一个实例。 (可能在幕后使用document.GetElementById)。

(根据 documentation ， CKEDITOR.replace(var) 将采用 DOM 元素、ID 或名称。)

鉴于此，您有几个选择。一种是推迟加载 CKEditor，直到您实际单击表行。这看起来像这样...(注意每个 textarea 都有一个唯一的 id)

<section id="d_' . $counter . '" style="display:none;">
    <textarea id="editor_'.$counter.'">
        <div style="width:468px;">
            '.$article_content_full.'
        </div>
    </textarea>

$(document).ready(function()
{
    $(".trClass").click(function()
    {
        var id = $(this).attr('id');
        $('#d_'+id).css("display", "block");
        $('#table_id').css("display", "none");
        CKEDITOR.replace('editor_'+id);
    });
}); 

第二个选项是循环遍历所有 textarea元素并在加载时调用每个元素的替换。我真的不推荐这样做，除非有一些特定的原因你想预先加载所有内容。

编辑:虽然这应该可以解决您的问题，但您应该查看其他回答者提出的 HTML 问题。 <section>不属于 <table> 的子级:-)