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

Question

I've got a table row where it retrieves data from MySQL and I have included a .onclick function where it opens up a text editor with data inside, but the text editor is only opening for the first row and not the rest in the table.

This is the jQuery code: The first opens the text editor and the second switches the textarea for the text editor which is 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>

and this here is echo for the table, I am using a 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++;
}

I cannot figure out how to make the CKEDITOR.replace("editor1"); load for every table, I tried using .click function within it but it does not work as it doesn't load. Here is the problem, if you click on the first row it opens the text editor if you click on the second it does not; http://www.goo.gl/dQrLPN

Answer 1

Typically the id attribute should be unique for each element. Applying properties across multiple elements is usually accomplished with a class . Knowing this, CKEditor is probably just grabbing the first instance of an object with the given id (probably using document.GetElementById behind the scenes).

(According to the documentation , CKEDITOR.replace(var) will either take a DOM element, ID, or name.)

Given that, you have a couple of options. One is to defer loading the CKEditor until you actually click on the table row. This would look something like this... (note how each textarea has a unique 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);
    });
}); 

The second option would be to loop through all of the textarea elements and call replace on each one of them on-load. I wouldn't really recommend this, unless there's some specific reason you want to load everything up-front.

EDIT: Although this should fix your issue, you should look in to the HTML issues the other answerers have put forward. <section> doesn't belong as a child of <table> :-)

Answer 2

Try targeting the table and filtering by the rows using the .on() method.

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

Details on .on() are here: https://api.jquery.com/on/

And as noted in the comments above, there are some overall issues with your HTML that you should probably fix before proceeding further.