JQuery脚本问题

JQuery scripting issue

本文关键字：问题 脚本 JQuery      更新时间：2024-05-30

我在主体内创建了一个按钮，当单击该按钮时，它将创建一个带有关闭图标的文本字段。当单击关闭图标时，它会隐藏文本字段。第一次一切都很好，当我再次点击按钮时，它会创建文本字段，但关闭图标没有响应

    $("#btn1").click(function(){
                        $( "#container" ).find( ".placeholder" ).remove();
                        $( "<div id='dtf'><input type='textfield' id='tf' name='Textfield'></input><input type='image' src='cancel.jpg' alt='Submit' width='15' height='15' id='close1'></input></div>" ).appendTo("#container" );
                        $("<div id='dtf2'><input type='textfield' id='tf2'></input></div>").appendTo("#container2" );
                            $("#close1").click(function(){
                                $("#dtf").hide();
                                $("#dtf2").hide();
                                $("#container").show();
                            });
                });

每次单击"btn1"时都会附加标记，这会创建重复的ID，这可能会破坏选择器。也许可以尝试在标记中包含DIV，但使用CSS隐藏。

CSS：

.collapsable {
    display: none;
}

HTML:

<div id="container">
    <div id='dtf' class="collapsable"> [snip the inputs etc] </div>
    <div id='dtf2' class="collapsable"> [snip] </div>
</div>

JS:

$("#btn1").click(function(){
    $("#dtf").show();
    $("#dtf2").show();         
});
$("#close1").click(function(){
    $("#dtf").hide();
    $("#dtf2").hide();         
});

更整洁的是有一个按钮，它调用"toggle"，并在单击打开/关闭时重命名自己。

看看小提琴，在这里，它更短更简单。

我假设您正在尝试制作"字段生成器"，这样您就可以创建多个文本字段，您不应该在这里使用#id，仅使用classess/attributes。在DOM中，只能有一个具有特定名称的id。也许是这样。尝试使用类。并尝试制作可重复使用的代码。

相关文章：