Question

我正在使用Bear Bibeault等人的“JQuery in Action”一书学习jquery。我正在尝试创建DVD高级搜索页面，在该页面上单击“应用过滤器”按钮，出现选择迷你表单帮助您搜索。

基本上它克隆了div＃templates并将它放在div＃下的一个新div中，如果需要，还可以选择一个按钮删除它。到目前为止，我只能显示删除按钮。 Chrome中的javascript控制台显示没有错误。所以它根本不附加。 alert（）告诉我至少每个（）函数循环遍历元素，它们都出现在那里。

jquery的：

$(function() {
    $('div#templates').hide();
    $('#addFilterButton').click(function(event) {
        var uniq = Math.random().toString(36).substr(0,10);
        var nnew = $('<div id="div'+uniq+'" class="selected"></div>');
        var button = $('<button type="button" class="filterRemover" title="Remove this filter">X</button>');
        button.click(function(event) {
            $(this).parent('div.selected').remove();
        });
        nnew.append(button);
        var add = $('div#templates').clone().addClass('container'+uniq);
        $(add).children().each(function(){
            $(this).addClass('input'+uniq);
        });
        add.insertAfter(button);
        $('div#selected-filters').append(nnew);     
    });
});

HTML：

<body>
<fieldset id="field">
<legend>Use this form to do an advanced search for DVDs</legend>
    <div id="selected-filters" class="selected">
    </div>
    <div id="templates">

        <div class="template filterChooser">
            <button type="button" class="filterRemover" title="Remove this filter">X</button>
            <select name="filter" class="filterChooser" title="Select a property to filter">
                <option value="" data-filter-type="none" selected="selected">-- choose a filter --</option>
                <option value="title" data-filter-type="stringMatch">DVD Title</option>
                <option value="category" data-filter-type="stringMatch">Category</option>
                <option value="binder" data-filter-type="numberRange">Binder</option>
                <option value="release" data-filter-type="dateRange">Release Date</option>
                <option value="viewed" data-filter-type="boolean">Viewed?<option>
            </select>
        </div>

        <div class="template stringMatch">
            <select name="stringMatchType">
                <option value="*">contains</option>
                <option value="^">starts with</option>
                <option value="$">ends with</option>
                <option value="=">is exactly</option>
            </select>
            <input type="text" name="term" />
        </div>

        <div class="template numberRange">
            <input type="text" name="numberRange1" class="numeric" size="3" /> <span>through</span>
            <input type="text" name="numberRange2" class="numeric" size="3" />
        </div>

        <div class="template dateRange">
            <input type="text" name="dateRange1" class="dateValue" />
            <span>through</span>
            <input type="text" name="dateRange2" class="dateValue" />
        </div>

        <div class="template boolean">
            <input type="radio" name="booleanFilter" value="true" checked="checked" />
            <span>yes</span>
            <input type="radio" name="booleanFilter" value="false" />
            <span>no</span>
        </div>
    </div>

    <div id="pageContent">
        <h1>DVD Ambassador</h1>
        <h2>Disc Locator</h2>

        <form id="filtersForm" action="/fetchFilteredResults" method="post">
            <fieldset id="filtersPane">
            <legend>Filters</legend>
                <div id="filterPane"></div>
                <div class="buttonBar">
                    <button type="button" id="addFilterButton">Add Filter</button>
                    <button type="submit" id="applyFilterButton">Apply Filter</button>
                </div>
            </fieldset>

            <div id="resultsPane">
                <span class="none">No results displayed</span>
            </div>
        </form>
    </div>
</fieldset>

</body>

Answer 1

似乎您的克隆元素在此行设置为hide：

$('div#templates').hide();

因此，当它被克隆时，它似乎是隐藏的。您可以通过执行以下操作再次将其设置为可见：

add.show().insertAfter(button);

Jquery：没有附加到DOM的克隆元素？

1 个答案: