Question

我的用例：像经验一样创建标签。点击添加按钮可以动态创建

（horz标签按钮）和相应的div，它通过onclick listener链接。

问题：

点击添加按钮后，系统会重置之前标签中的值（这与$tabs_prev和$menu_prev的填充方式明显相符）
他们各自的js消失了（我无法理解，为什么？）
删除标签实施（因为我对这些标签进行编码的方式，删除标签和相应的div并不是非常简单，所以，这方面的任何线索，也许？）

HTML：

<body>
        <input id="hidden" type="hidden" value="1"></input>

        <div id="template_tabBtn" style="display:none">
            <input type="button" value="add" onclick="addTab()"></input>
        </div>

        <ul id="menu">
        </ul>

        <div id="tabs">
        </div>

        <div id="template_tabBar" style="display:none">
            <li>
                <input type="button" id="tab_btn" class="template_tabBar" value="Tab" onclick="tabClick(this)"></input>
            </li>
        </div>

        <div id="template_tabs" style="display:none">
            <div id="tabs" class="template_tabs tab_div" value="1">
                <input type="text" id="txt" class="template_tabs" value="alert"></input>
                <input type="button" id="btn" class="template_tabs" value="alert"></input>
            </div>
        </div>
    </body>

CSS：

    <style>
        ul#menu {
            padding: 0;
        }
        ul#menu li {
            display: inline;
        }
        ul#menu li input {
            background-color: black;
            color: white;
            padding: 10px 20px;
            text-decoration: none;
            border-radius: 4px 4px 0 0;
        }
        ul#menu li input:hover {
            background-color: orange;
        }
    </style>

jQuery：

<script src="http://code.jquery.com/jquery-1.9.1.js" type="text/javascript"></script>
        <script>
            $tabs_prev = "";
            $menu_prev = "";
            $add_btn = "";
            $current_tabID = "";

            function tabClick(id) {
                showCurrent($(id).attr('id'));
            }

            function addTab() {
                var tabCount = parseInt($('#hidden').val()) + 1;
                $('#hidden').val(tabCount);
                run(tabCount);
                showCurrent($('#tabs-' + tabCount).attr('id'));
            }
            $(document).ready(function() {
                $add_btn = "<li>" + $('#template_tabBtn').html() + "</li>";
                run(1);
            });

            function run(tabCount) {
                //$tabs_prev += main($('#template_tabs'),tabCount);//alert("tabs\n"+$tabs_prev);
                $menu_prev += main($('#template_tabBar'), tabCount); //alert("menu\n"+$menu_prev);

                $('#tabs').html($('#tabs').html() + main($('#template_tabs'), tabCount));
                $('#menu').html($menu_prev + $add_btn);
                logic(tabCount);
            }

            function main(target, tabCount) {
                $htmlBackup = $(target).html();
                $('.' + $(target).attr('id')).each(function() {
                    $(this).attr('id', $(this).attr('id') + "-" + tabCount).removeClass($(target).attr('id'));
                    $(this).attr('value', $(this).attr('value') + "-" + tabCount);
                });
                $html = $(target).html();
                $(target).html($htmlBackup);
                return $html;
            }

            function logic(tabCount) {
                $('#btn-' + tabCount).click(function() {
                    alert($('#txt-' + tabCount).val());
                });
            }

            function showCurrent(current_id) {
                $('.tab_div').each(function() {
                    var id = $(this).attr('id');
                    var id_num = id.substr(id.lastIndexOf('-') + 1, id.length);
                    var current_id_num = current_id.substr(current_id.lastIndexOf('-') + 1, current_id.length);
                    if (id_num == current_id_num) {
                        $("#tabs-" + id_num).show();
                        $('#tab_btn-' + id_num).css({
                            "background-color": "orange"
                        });
                    } else {
                        $("#tabs-" + id_num).hide();
                        $('#tab_btn-' + id_num).css({
                            "background-color": "black"
                        });
                    }
                });
            }
        </script>

Answer 1

您的javascript消失的原因是重置innerHTML会删除元素上的onclick处理程序。原因：原始元素被销毁，包括对事件的引用和新元素的创建。

负责此事的代码：

 $('#tabs').html($('#tabs').html() + main($('#template_tabs'), tabCount));

请使用jQuery通过克隆模板选项卡附加元素：

 $('#tabs').append($('#template_tabs').clone(true));

Append将htmlstrings或element添加到父元素。它是原生文件＆＃39; appendChild＆＃39;的增强版本。
clone克隆模板元素（制作副本）。您可以在函数main中执行此操作，并将其返回到append函数。

 function main(tabCount)
 {
     var node = $('#template_tabs').clone(true));
     //do things with the node, like setting an onclick handler, or id.
     //example
     node.setAttribute("id", "tab" + tabCount);
 }

也可以进行删除：

function removeNode(node)
{
    //provide a node via jQuery
    //example: removeNode($("#tab2")) <-- now tab2 will be removed from the DOM.
    node.remove();
}

自定义html选项卡实现问题

1 个答案: