1

I have a binding to a search input like this:

$(document).on('tablebeforefilter.results_filter',
   '#results_table:not(.bound)',
   function (e, data) {
     e.target.class += "bound";
     // stuff
   });

I'm using the bound class to prevent re-binding of the element if the page is reloaded (I'm using Jquery Mobile so this will happen when the user goes back and forth between two pages.

My problem is, doing it like this will correctly set the binding, but it will trigger my handler only once, presumable, because I add the 'bound' class to the element.

Question:
Why is it like this? I thought a binding set on $(document) & some element would be set and then runs no matter what class I add to this element. Only when the page is re-parsed my bound class prevents attaching the binding a second time. Why is my function no longer triggering if I add the blocking bound class?

Thanks!

frequent
  • 27,643
  • 59
  • 181
  • 333
  • if you're using jQuery... why not `$(this).addClass( 'bound' );` ? – Gonçalo Vieira Mar 19 '13 at 09:52
  • mh. I like to use pure Javascript where I can. Does it make a difference? – frequent Mar 19 '13 at 09:53
  • Basically you are trying to prevent multiple event binding? – Gajotres Mar 19 '13 at 09:54
  • 1
    You are missing a space before `bound`. If the element already has class `foo`, you make it have class `foobound`. Not `foo` anymore, and not `bound`. – Jon Mar 19 '13 at 09:55
  • 1
    Isn't `.class` a string? So you add `"bound"` to the string `"results_filter"` and get `"results_filterbound"` – a completely new class. – ckruse Mar 19 '13 at 09:55
  • yes. I know I can use `$(document).off('pagehide','.results_filter')` but the user will go back and forth between page A and B and I don't want to bind/unbind/bind... – frequent Mar 19 '13 at 09:55
  • Then why don't use standard ways of multiple binding prevention? – Gajotres Mar 19 '13 at 09:56
  • @Gajotres: so what is the standard way? – frequent Mar 19 '13 at 10:08
  • 1
    Take a look at this link: http://stackoverflow.com/a/14469041/1848600 , search for chapter Prevent multiple event binding/triggering. Look at a solution 2 or 3. Solution 3 is an easiest one. – Gajotres Mar 19 '13 at 10:13

2 Answers2

3

.class is a string. So you add "bound" to the string "results_filter" and get "results_filterbound" – a completely new class. Therefore the .on() selector does no longer match. If you want to use .class, you have to add a blank, too:

e.target.class += " bound";

This adds a class bound and keeps the old class. To easily handle classes you could use addClass() or removeClass() of jQuery.

ckruse
  • 9,642
  • 1
  • 25
  • 25
1

Using jQuery with ".on" is designed to be used with a changing html structure. So once you add the class "bound", your event is not triggered anymore.

Try using something like this instead

$(document).on('tablebeforefilter.results_filter', '#results_table', function (e, data) {
    var $table = $(this);
    if ($table.hasClass('bound') == false) {
        $table.addClass('bound');
    } else {
        // stuff with bound class
    }
    // common stuff for both cases
});
Chapter2
  • 102
  • 5