CODEWITHSUNDEEP
jqueryonclick
Tyler
Tyler

Reputation: 304

onclick function added by jquery is being called twice

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
I am trying to let users create a list of filters, essentially. Adding them seems to work fine, however the remove() function only works properly when there is only one filter item. If you create a first, then click remove on the bottom item, the onclick() function for that item is called twice, and I can't for the life of me figure out why.

Upvotes: 0

Views: 1627

Answers (2)

Rodolfo
Rodolfo

Reputation: 4183

Can't see the fiddle running, but from the code you might want to change the 

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

to

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

(same with the other click)

EDIT: Oh, now I can see it running. The actual problem it seems to me is that when you add a 'remove' link, you do a rebinding of click for .remove-filter (which includes the already created ones). Instead what you can do is use .on only once, and it applies to all the elements you have plus whatever new elements you create. Something like...

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

do this once in the document.ready and that should do it (remove the call to reg_remove after adding a 'remove' link)

P.D. .on works on jquery 1.7 and later, if you use an earlier version, you'd use .live or .delegate to achieve that

Upvotes: 2

raddrick
raddrick

Reputation: 4453

yes, change the framework to jquery to make your fiddle work..

what is happening is you are calling .remove on each entry, and when you have multiple remove buttons, it will call the click for each one that is created (every time you create a new one, you add a new click event to the .remove selector...you need these to be inherent. at create time, add an anon function call that that record only, and you wont have this issue anymore

when you have 3 remove buttons, it gets called three times, 2 buttons, two times, because on each add, you add another click handler to the list..

Upvotes: 0

Related Questions