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;
    });

}）;

EDITED 我决定让它更容易，只是隐藏输入并像简单的动画一样显示它们。现在唯一的问题是，i不计算为1.当它假设要摆脱begin_date_1时，它会查找begin_date_2（显然不存在）。

Answer 1

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

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

1 个答案: