选项从添加输入中选择JQuery事件

Question

我正在尝试编写一个脚本，该脚本将允许我从选定的option中将字段添加到表单中：这是HTML：

<div id="rules"><!--javascript handled by addRule.js in /js/ --> 
    <div id="add-rule">
         <p></p><!--left empty for script to fill-->
         <a href="#" class="add-rule" id="add">+Inclusion Rule</a>
</div>

然后，当您点击+Inclusion Rule时，我的Javascript实际上会添加新字段：

$(function() {
    var scntDiv = $('#rules');
    var i = $('#rules p').size();

    $('#add').live('click', function() {
            var inputRule = '<p>User:<br><select name="user_rule_'+i+'">'+
             '<option value="registered">Registered</option>'+
             '<option value="purchased">Purchased</option>'+
             '<option value="created">Created</option></select> '+
             '<select id="time_select_'+i+'" class="time-select-'+i+'" name="time_select_'+i+'">'+
             '<option value="yes">all (included)</option>'+
             '<option value="yes">all (not included)</option>'+
             '<option value="BEFORE">before</option>'+
             '<option value="AFTER">after</option>'+
             '<option value="BETWEEN">between</option></select> '+
             '<input type="date" name="begin_date_'+i+'" id="begin_date_'+i+'" class="campaign-input"><br>'+
             '<input type="date" name="end_date_'+i+'"  id="end_date_'+i+'" class="campaign-input"><br>'+
             '<a href="#" class="delete-rule">Remove</a>';
            $(inputRule).appendTo(scntDiv);
            $('#begin_date_'+i).hide();
            $('#end_date_'+i).hide();
            $('#time_select_'+i).change(function(){
                if($(this).val() == 'BEFORE' || $(this).val() =='AFTER'){
                    $('#begin_date_'+i).show();
                    console.log($('#begin_date_'+i).show());
                }
            });
            i++;
            return false;
    });
    $('.delete-rule').live('click', function() { 
        if( i > 1 ) {
                $(this).parents('p').remove();
                i--;
        }
        return false;
    });

}）;

编辑我决定简化它，只隐藏输入并像简单的动画一样显示它们。 现在唯一的问题是， i的计数begin_date_1了1。当假定要摆脱begin_date_1它会寻找begin_date_2 （显然不存在）。

Answer 1

发生问题是因为，当您替换“删除”按钮时，您并未将其放在P标记内，这意味着$(this).parents('p')将不返回任何内容，也不会删除任何内容。