選項從添加輸入中選擇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')將不返回任何內容，也不會刪除任何內容。