2012-06-01 2 views
0
var filters_used = new Array(); 
$('#filter-text').keyup(function(k) { 
    $('#error').html(''); 
    if (k.keyCode == 13) { 
     $('#add-filter').click(); 
    } 
}); 

function reg_remove() { 
    $('.remove-filter').click(function() { 
     console.debug("remove-filter.click()"); 
     var col = $(this).children('td:nth-child(2)').html(); 
     var index = $.inArray(col, filters_used); 
     filters_used.splice(index, 1); 
     $(this).parents('.filter').remove(); 
     return false; 
    }); 
} 

function check_value() { 
    var flag = true; 
    var value = $('#filter-text').val(); 
    var col = $('#filter-type').val(); 
    var reg = /[^0-9a-zA-Z\s\-]/; 
    if (value.match(reg) || value.trim() === "") { 
     flag = false; 
     $('#error').html('Only letters, numbers, spaces, and dashes (-) are allowed.'); 
    } else if ($.inArray(col, filters_used) >= 0) { 
     flag = false; 
     $('#error').html('That column is already being filtered.'); 
    } 
    return flag; 
} 
$('#add-filter').click(function() { 
    if (check_value()) { 
     var value = $('#filter-text').val(); 
     var col = $('#filter-type').val(); 
     $('#filter-text').val(''); 
     appendstr = '<tr class="filter"><td>' + value + '</td><td>' + col + '</td><td>' + '<a href="" class="remove-filter">Remove</a></td></tr>'; 
     $('#filter-form').after(appendstr); 
     filters_used.push(col); 
     reg_remove(); 
     //queryDB(); 
    } 
}); 

function get_filters() { 

}? 

Link to a fiddle containing my code
Я пытаюсь, чтобы позволить пользователям создавать список фильтров, по существу. Добавление их, кажется, работает нормально, однако функция remove() работает только тогда, когда есть только один элемент фильтра. Если вы создаете первый, а затем нажмите «Удалить» в нижнем элементе, функция onclick() для этого элемента вызывается дважды, и я не могу на всю жизнь понять, почему.OnClick функция добавлен JQuery вызывается дважды

ответ

2

Не можете увидеть скрипку работает, но из кода вы можете захотеть изменить

$('#add-filter').click(function() { 

в

$('#add-filter').click(function(e) { 
    e.preventDefault() 

(то же самое с другой мыши)

EDIT: О, теперь я вижу, как он работает. Фактическая проблема, которая мне кажется, заключается в том, что когда вы добавляете ссылку «удалить», вы восстанавливаете щелчок на .remove-filter (который включает уже созданные). Вместо этого вы можете использовать только .on, и это относится ко всем элементам, которые у вас есть, и к любым новым элементам, которые вы создаете. Что-то вроде ...

$('table').on("click", ".remove-filter", function() { 
... 

сделать это один раз в document.ready и что должно делать это (удалить вызов reg_remove после добавления ссылки «Удалить»)

P.D. .on работает на JQuery 1.7 и более поздних версий, если вы используете более раннюю версию, вы бы использовать .live или .delegate, чтобы добиться того, что

+0

Я думаю, что скрипка была установлена ​​как mootools, а не jQuery, извините. – Tyler

+0

его не e.preventDefault, в котором проблема, заключается в том, что мы назначаем щелчок .remove каждый раз, когда он создается. – RGB

+0

да, я заметил, отредактировал ответ – Rodolfo

0

да, изменить структуру для JQuery, чтобы сделать вашу скрипку работу ..

что происходит вы вызываете .remove на каждой записи, и когда у вас есть несколько кнопок удаления, он будет вызывать щелчок для каждого созданного (каждый раз, когда вы создаете новый, вы добавляете новое событие click в селектор .remove. ... вам нужно, чтобы они были неотъемлемыми. В момент создания добавьте вызов анонимной функции только этой записи, и у вас больше не будет этой проблемы

, когда у вас есть 3 remo ve кнопки, он вызывается три раза, 2 кнопки, два раза, потому что на каждом добавлении вы добавляете в список еще один обработчик кликов.

Смежные вопросы