Is there a maximum number of elements I can bind a jquery event to?

Question

I'm building a simple 1 page app that allows someone to curate a list of json feeds. I'm running into an issue with trying to bind a mouseenter/mouseleave event to all the inputs on the page with a given class. Simply, put the first works and the second does not.

I have to following jquery:

        $(".feed").on("mouseenter", ".publish", function(){
            console.log("feed")
        }); //this is for test purposes
        $(".feed").on("mouseenter", ".keys-input", function(){
            console.log($(this)); 
            $(this).siblings(".delete").fadeIn(75); 
        }); 
        $(".feed").on("mouseleave", ".keys-input", function(){
            $(this).siblings(".delete").fadeOut(75); 
        });

and the following html:

<div class="feed"><!-- sorry for the confusion -->
    <div class="feed-header">
    <h2>pga-2013.json</h2>
    <button class="publish button-white-bg button-save">Publish</button>
    </div>
    <div class="kvRow collapsed">
    <span class="delete icon">x</span>
    <input type="text" class="keys-input" value="free" disabled=""/> 
    <input type="text" class="values-input" value="0" disabled=""/>
    </div>
</div>

The reason I ask if there is a max number of elements you can bind to is because the ".feed" event triggers and there are only 11 of them on the dom whereas the ".keys-input" event does not and there are 7266 of them on the dom. Either that or I'm blind and doing something dumb...

here's a fiddle with fewer elements but the same code that works http://jsfiddle.net/khLPc/

this is the issue: Event on a disabled input the inputs are disabled so they won't fire events which is bananas to me...

It is not firing on disabled elements, it is not about the count — Balint Bako, Aug 08 '13 at 16:39
No, there's no maximum, and in any case you're only binding the handler to *one* element. Are you certain that the "keys-input" elements are really descendants of the "feed" container? — Pointy, Aug 08 '13 at 16:40
@BalintBako - please elaborate on "its not firing on disabled elements" what would disabling the input have to do with it? — Brad, Aug 08 '13 at 16:42
I think that the issue is indeed that the events don't fire on the disabled elements. If you take away the "disabled" flag, it works fine. (You said your fiddle works, but it doesn't for me.) — Pointy, Aug 08 '13 at 16:42
seriously!? why? If that's the case, what a kick in the nuts... — Brad, Aug 08 '13 at 16:43
Try replacing `$(".feed")` with `$(document)` for debugging purposes.. See if that works.. — Sushanth --, Aug 08 '13 at 16:43
The problem is that your HTML DOM doesn't have anything with a class of 'feed'. I see one with 'feed-header', but that is not going to match. If you want things that START with `feed` then your selector should be `$("[class~=feed]").on(...)` — Derek, Aug 08 '13 at 16:44
Enable the input and you will see what I mean. Not that it is not obvious what I mean. http://jsfiddle.net/balintbako/khLPc/1/ — Balint Bako, Aug 08 '13 at 16:45
@Derek that has nothing to do with i just didn't put ALL the parent containers in the question. — Brad, Aug 08 '13 at 16:45
@BalintBako - will you make an answer for this so I can accept it? — Brad, Aug 08 '13 at 16:46

score 1 · Accepted Answer · answered Aug 08 '13 at 16:48

The event is not triggered on the disabled element.

Enable the input and it will work. Check here, I've enabled one of the input fields: http://jsfiddle.net/balintbako/khLPc/1

Apparently I have to include some code too:

<input type="text" class="keys-input" value="free"/>

Is there a maximum number of elements I can bind a jquery event to?

1 Answers1