0

我为我的网站添加了动态下拉搜索菜单。如果您转到我提供的链接，您会注意到左侧的 2 个链接用于表格选项中的 javascript 添加/删除行，这些链接在我将class="chzn-select"（动态搜索菜单）添加到下拉菜单之前都可以正常工作。发生的情况是，当添加类时，由于某种原因它不再添加新行。

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

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

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

谢谢

我会在此处粘贴 css 代码，但该网站一直说它包含代码并且无论我如何格式化它都不让我发布.. :\

4

2 回答 2

1

当您使用 selected.jquery.min.js 和 choose.css 在选择选项后生成动态新的 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;
                    });
                });
           });

        };
    });

好的，在该页面上更改没有其他内容...

于 2013-03-18T14:31:31.703 回答
0

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

它显示一个用于过滤国家列表的输入字段。这样做的问题是这个输入字段没有 -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 可以拆分。关于这里的更多信息：

按属性选择元素

此外，您的-functionclickMe()确实捕获了onclick-event 并没有任何用途并会产生错误。

于 2013-03-18T12:18:56.087 回答