当元素更新两次时，JQ 不起作用

【问题标题】：When element is updated twice JQ is not working当元素更新两次时，JQ 不起作用
【发布时间】：2017-06-07 21:59:02
【问题描述】：

我正在使用 socket.io 发送一些数据，但 JQ 动画/slideToggle 等仅适用于最后一个元素（例如，data1 和 data2 不会切换）。

在逆向工程/剪切所有不相关的代码/修改它以便更简单更好理解之后，我得到：

HTML：

                <div class="wrapper1">
                <div class="wrapper1_name">WRAPPER1</div>
                    <ul class="wrapper1_ul">
                        <li>
                            <div class="container1_name">container1</div>
                            <div class="container1"></div>
                            <div class="container2_name">container2</div>
                            <div class="container2"></div>
                            <div class="container3_name">container3</div>
                            <div class="container3"></div>
                        </li>
                    </ul>
                </div>
<script src="jquery.min_v3.1.1.js"></script>

SOCKET.IO - 服务器：

            socketio_data1_html = '<div class="data1">Data1</div>'
            req.io.emit('socketio data1', {socketio_data1_html : data1});

            socketio_data2_html = '<div class="data2">Data2</div>'
            req.io.emit('socketio data2', {socketio_data2_html : data2});

            socketio_data3_html = '<div class="data3">Data3</div>'
            req.io.emit('socketio data3', {socketio_data3_html : data3});

SOCKET.IO - 客户端：

            /* DATA1 */
                socket.on('socketio data1', function(data1)
                {
                    document.getElementsByClassName('container1')[0].innerHTML +=
                    '<ul class="data1_ul"><u>Data1:</u>'
                        + '<li>'
                            + '<ul class="ul_data1_content">'
                                + '<li class="data1_li_content">' + data1.socketio_data1_html + '</li>'
                            + '</ul>'
                        + '</li>'
                        + '<li>'
                            + '<ul class="ul_data1_info">Slide text (CLICK ME - why this is not working?):' 
                                + '<li class="data1_li_info">'
                                    + 'Data1 slideToogle text.'
                                + '</li>'
                            + '</ul>'
                        + '</li>'
                    + '</ul>';

                    if (document.getElementsByClassName('.data1_ul') !== null)
                    {
                        $('.data1_li_info').hide(); // optional - to hide INFO by default
                        $('.ul_data1_info').click(function()
                        {
                            $('.data1_li_info').slideToggle();
                        });
                    }
                });
            /* / DATA1 */

            /*  DATA2 */
                socket.on('socketio data2', function(data2)
                {
                    document.getElementsByClassName('container1')[0].innerHTML +=
                    '<ul class="data2_ul"><u>Data2:</u>'
                        + '<li>'
                            + '<ul class="ul_data2_content">'
                                + '<li class="data2_li_content">' + data2.socketio_data2_html + '</li>'
                            + '</ul>'
                        + '</li>'
                        + '<li>'
                            + '<ul class="ul_data2_info">Slide text (CLICK ME - why this is not working?):' 
                                + '<li class="data2_li_info">'
                                    + 'Data2 slideToogle text.'
                                + '</li>'
                            + '</ul>'
                        + '</li>'
                    + '</ul>';

                    if (document.getElementsByClassName('.data2_ul') !== null)
                    {
                        $('.data2_li_info').hide(); // optional - to hide INFO by default
                        $('.ul_data2_info').click(function()
                        {
                            $('.data2_li_info').slideToggle();
                        });
                    }
                });
            /* / DATA2 */

            /* DATA3 */
                socket.on('socketio data3', function(data3)
                {
                    document.getElementsByClassName('container1')[0].innerHTML +=
                    '<ul class="data3_ul"><u>Data3:</u>'
                        + '<li>'
                            + '<ul class="ul_data3_content">'
                                + '<li class="data3_li_content">' + data3.socketio_data3_html + '</li>'
                            + '</ul>'
                        + '</li>'
                        + '<li>'
                            + '<ul class="ul_data3_info">Slide text (CLICK ME - why only this works?):' 
                                + '<li class="data3_li_info">'
                                    + 'Data3 slideToogle text.'
                                + '</li>'
                            + '</ul>'
                        + '</li>'
                    + '</ul>';

                    if (document.getElementsByClassName('.data3_ul') !== null)
                    {
                        $('.data3_li_info').hide(); // optional - to hide INFO by default
                        $('.ul_data3_info').click(function()
                        {
                            $('.data3_li_info').slideToggle();
                        });
                    }
                });
            /* / DATA3 */

CSS：

.wrapper1
{padding:10px;
background:red;}

.wrapper1_name
{padding:10px;
background:brown;}

.container1_name
{padding:10px;
background:green;}

.container1
{padding:20px;
background:blue;}

.data1
{padding:10px;
background:orange;}

.data2
{padding:10px;
background:pink;}

.data3
{padding:10px;
background:aqua;}

.container2
{padding:20px;
background:violet;}

.container3
{padding:20px;
background:gray;}

知道为什么吗？

【问题讨论】：

• 您需要显示您遇到问题的代码。
• @Barmar，好的，我会尽量简化代码并粘贴到这里。
• 像这样混合纯 JS 和 jQUery 真的很令人困惑。为什么不自始至终使用 jQuery？
• 您在该代码中的哪个位置发送<li> 问题中的元素？
• document.getElementsByClassName('test')[0].innerHTML += '

  test + test.socketio +

  ';数据是
• 测试