Question

我有一个表行，它从MySQL中检索数据，我已经包含了一个.onclick函数，它打开了一个内部有数据的文本编辑器，但是文本编辑器只打开第一行而不是其余部分在表中。

这是jQuery代码：第一个打开文本编辑器，第二个切换文本编辑器的textarea是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元素，并在每个元素上加载调用replace。我不会真的推荐这个，除非有一些特定的原因你想要预先加载所有东西。

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

Answer 2

尝试使用.on()方法定位表并按行过滤。

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

有关.on()的详情，请访问：https://api.jquery.com/on/

正如上面的评论中所指出的那样，在进一步推进之前，您可能应该修复一些HTML问题。

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

2 个答案: