Question

我为我的网站添加了动态下拉搜索菜单。如果你转到我提供的链接，你会注意到左边的2个链接，用于表格选项中的javascript添加/删除行，直到我将class="chzn-select"（动态搜索菜单）添加到下拉菜单中。会发生什么，当添加类时，由于某种原因，它不再添加新行。

在左侧菜单中，您可以单击以查看操作中的NoCSS表，以及有问题的CSS表，其中包含class="chzn-select"。我认为问题是这个菜单的css是动态的，具体取决于菜单所处的状态，但无法找出问题所在。任何帮助表示赞赏..

测试链接：http://directa.sytes.net/test/ 用户： test1 通过： test1

添加/删除使用的脚本：jsfiddle.net/frtrc

谢谢

我会在这里粘贴css代码，但网站一直说它包含代码，不管我怎么格式化它都不会发布...：\

Answer 1

当你使用selected.jquery.min.js和choose.css在select选项后生成dyanamically new div时出现问题，所以javascript时间不起作用 $ tr.find（“input，select”）。attr（“name”，function（）因为只有两个标签添加输入并选择

我建议在

中添加javascript行

$(document).ready(function($)
    {
        $('#sif_roba1').next('div').attr("id","sif_roba1");//Chane Code
        $('#sif_roba1').next('div').attr("name","sif_roba1");
        // trigger event when button is clicked
        $("button.add").click(function()
        {
            // add new row to table using addTableRow function
            addTableRow($("table"));
            // prevent button redirecting to new page
            return false;

        });

        // function to add a new row to a table by cloning the last row and 
        // incrementing the name and id values by 1 to make them unique
        function addTableRow(table)
        {

            // clone the last row in the table
            var $tr = $(table).find("tbody tr:last").clone();


            // get the name attribute for the input and select fields


            $tr.find("input,select,div").attr("name", function()
            {
                // break the field name and it's number into two parts
                var parts = this.id.match(/(\D+)(\d+)$/);
                // create a unique name for the new field by incrementing
                // the number for the previous field by 1
                return parts[1] + ++parts[2];

            // repeat for id attributes
            }).attr("id", function(){
                var parts = this.id.match(/(\D+)(\d+)$/);
                return parts[1] + ++parts[2];
            });
            // append the new row to the table
            $(table).find("tbody tr:last").after($tr);
            $tr.hide().fadeIn('slow');

            // row count
            rowCount = 0;
            $("#table tr td:first-child").text(function() {
                return ++rowCount;
            });

            // remove rows
            $(".remove_button").on("click", function() {
                $(this).parents("tr").fadeOut('slow', function () { 
                    $(this).remove();
                    rowCount = 0;
                    $("#table tr td:first-child").text(function() {
                        return ++rowCount;
                    });
                });
           });

        };
    });

好的，在那个页面上改变别的......

Answer 2

问题来自于使用搜索栏创建样式下拉列表的插件（对于选择国家/地区）。

它显示一个输入字段，用于过滤国家/地区列表。这个问题是这个输入字段没有id - 属性，因此当执行以下代码时，它没有任何要拆分的id，并且数组将为空。

$tr.find("input,select").attr("name", function()
{
    // break the field name and it's number into two parts
    var parts = this.id.match(/(\D+)(\d+)$/);
    // create a unique name for the new field by incrementing
    // the number for the previous field by 1
    return parts[1] + ++parts[2];
    // repeat for id attributes
}).attr("id", function(){
    var parts = this.id.match(/(\D+)(\d+)$/);
    return parts[1] + ++parts[2];
});

解决方案是首先确保有一个要分割的ID。有关这方面的更多信息：

Select elements by attribute

此外，clickMe() - 函数确实捕获了onclick - 事件不起任何作用并产生错误。

添加/删除行css

2 个答案: