在克隆的 div 中显示隐藏的 div

Question

我正在尝试制作一个下拉菜单可以重复多次的表单，并且可以触发显示其后的表单补充。

感谢这个例子：Repeating div with form fields，我已经完成了复制，但是复制的菜单并没有触发表单隐藏部分的显示。我对 jquery 没有太多经验，所以我不确定我做错了什么。这是一个jsfiddle和代码：

jsfiddle：http://jsfiddle.net/jP8cW/2/

HTML

<form action="#" method="post">
    <div class="repeatingSection">
        <select id="j_id_1" name="j_id_1">
            <option value="none">SELECT TITLE</option>
            <option value="new">New title</option>
            <option value="other">Other titles</option>
        </select>
        <div class="hidden">
            <h3>New Journal Info</h3>
            <p>
                <label for="title">Title: </label>
                <input type="text" name="j_title" id="title"/>
            </p>
        </div>
    </div>
    <a href="#" class="addJourn">Add Journal</a>
    <p><input type="submit"/></p>
</form>

JS

$('.addJourn').click(function(){
    var currentCount =  $('.repeatingSection').length;
    var newCount = currentCount+1;
    var lastRepeatingGroup = $('.repeatingSection').last();
    var newSection = lastRepeatingGroup.clone();
    newSection.insertAfter(lastRepeatingGroup);
    newSection.find("select").each(function (index, select) {
        select.id = select.id.replace("_" + currentCount, "_" + newCount);
        select.name = select.name.replace("_" + currentCount, "_" + newCount);
    });
    newSection.find("label").each(function (index, label) {
        var l = $(label);
        l.attr('for', l.attr('for').replace("_" + currentCount, "_" + newCount));
    });
    return false;
});

$("select[id^='j_id']").change(function(){
    var selection = this.value; //grab the value selected
    if (selection==="new"){
        $(this).next('.hidden').show()
    } else {
        $(this).next('.hidden').hide()
    }
});

CSS 就是 .hidden {display: none;}

非常感谢任何建议或见解。

Answer 1

JSFiddle

您遇到的是错误注册的结果。

在您注册“onchange”事件时，新元素还不存在。

您需要在创建事件时将事件注册到每个元素。 或者使用 jQuery 'live' 方法而不是 'change'。

.live() docs

在下面的示例中，我使用的是 Javascript 而不是 jQuery，因为 live 方法不能与 JSFiddle 一起正常工作。

完整解决方案：

<form action="#" method="post">
    <div class="repeatingSection">
        <select id="j_id_1" name="j_id_1">
            <option value="none">SELECT TITLE</option>
            <option value="new">New title</option>
            <option value="other">Other titles</option>
        </select>
        <div class="hidden">
            <h3>New Journal Info</h3>
            <p>
                <label for="title">Title: </label>
                <input type="text" name="j_title" id="title"/>
            </p>
        </div>
    </div>
    <a href="#" class="addJourn">Add Journal</a>
    <p><input type="submit"/></p>
</form>

<style>.hidden {
    display: none;
    }

  $(document).ready(function() {
    $('.addJourn').click(function(){
    var currentCount =  $('.repeatingSection').length;
    var newCount = currentCount+1;
    var lastRepeatingGroup = $('.repeatingSection').last();
    var newSection = lastRepeatingGroup.clone();
    newSection.insertAfter(lastRepeatingGroup);
    newSection.find("select").each(function (index, select) {
        select.id = select.id.replace("_" + currentCount, "_" + newCount);
        select.name = select.name.replace("_" + currentCount, "_" + newCount);
        //register the onchange event to the new element
        select.onchange = function(event) {onChange(event)};
    });
    newSection.find("label").each(function (index, label) {
        var l = $(label);
        l.attr('for', l.attr('for').replace("_" + currentCount, "_" + newCount));
    });
    newSection.find('.hidden').css('display','none');
    return false;
    });

    //register the onchange event only for the 1st element
    $('#j_id_1').change(function(event) {
        onChange(event);
    });

    //technically, you can use the live() method to register events to elements that do not yet exist. However, it was making problems with the JSFiddle so I skipped it. You may be able to use it in your code though.
});

function onChange(event) {
    var selection = event.target.value;//grab the value selected
    if (selection==="new"){
        $('#' + event.target.id).next('.hidden').show(500);
    } else {
        $('#' + event.target.id).next('.hidden').hide(500);
    }
}

</script>

希望这会有所帮助！