Why jquery event doesn't handle?

Question

I have wrote following code example:
html:

<input type="checkbox" name="terminal" class="all" data-terminal-id="9800" >

javascript:

function checkRightBarVisibility(){
    if(this.checked){
        alert('checked');
    }
}
$('input[name=terminal]').change(checkRightBarVisibility);

http://jsfiddle.net/o9ovnkxv/6/

This code works as expected.

But in my real code I have same javascipt code but I don't see alert.

I have not ideas how can it possible.

debug information:

enter image description here

bigger picture(https://i.stack.imgur.com/ADXB5.jpg)

Please help me to find the mistake.

P.S. full code is very huge thus I didn't post it.

update:

I tried following in debug:

I wrote following row:

$('input[name=terminal]').change(checkRightBarVisibility);

After it I have seen alert 1 time.

But only one time.

It's hard to help you without seeing your real code. If it's too huge, then you need to isolate the problem, extract relevant parts responsible for event binding, and setup a simple demo. It's very possible that during this you will find the issue yourself. — dfsq, Nov 09 '14 at 11:21
Are you adding these `input` elements dynamically by JS? If yes, are they already there at the time if assignment of `eventHandler`? — nisargjhaveri, Nov 09 '14 at 11:22
Quoting code that works and saying it's similar to code that doesn't work isn't helpful. You'll just have to reduce your code incrementally until either A) The problem goes away, in which case you look at what you just removed, since apparently it's the source of the trouble, or B) You end up with something short enough to qualify as an [MCVE](http://stackoverflow.com/help/mcve), and you can use that to ask the question. — T.J. Crowder, Nov 09 '14 at 11:26
@gstackoverflow, Then there is a possibility that you are adding them after `$('input[name=terminal]').change`, in which case the `eventHandler` wont apply to new elements. If this is the case, [this](http://stackoverflow.com/questions/203198/event-binding-on-dynamically-created-elements) may help. — nisargjhaveri, Nov 09 '14 at 11:27
I tryed to write $('input[name=terminal]').on("click",checkRightBarVisibility); — gstackoverflow, Nov 09 '14 at 11:37
Then, I can't help you unless you isolate your code and regenerate the problem with as few lines of code as possible. — nisargjhaveri, Nov 09 '14 at 11:42
@nisargjhaveri can you advise how to watch events for checkboxes in chrome debug? — gstackoverflow, Nov 09 '14 at 11:56
@gstackoverflow, since you are using jQuery, it won't be much helpful. But if you want to see, right-click on element -> inspect element -> Event Listeners (tab from right panel). It lists all event listeners on element. — nisargjhaveri, Nov 09 '14 at 11:59
Sometimes people have problems because two elements have the same `id` attribute (which they should never have) and the browser ignores one of them. It's conceivable that something similar could happen if two elements in the same `
` have the same `name`. — David Knipe, Nov 09 '14 at 13:05

score 1 · Accepted Answer · edited May 23 '17 at 11:44

1

If your inputs are being added dynamically then you should use delegation:

$('body').on("change", 'input[name=terminal]', checkRightBarVisibility);

(In jQuery, how to attach events to dynamic html elements?)

edited May 23 '17 at 11:44

Community

1
1

answered Nov 09 '14 at 13:04

phts

3,889
1
19
31

Yes. it is right answer – gstackoverflow Nov 09 '14 at 13:22
But it is working if I click on this checkbox. Sometimes I click to another component and inside this component click handler I check/uncheck this checkbox. How to catch this changes too? – gstackoverflow Nov 09 '14 at 13:41
You can add any selectors to the second argument in `on` function. Use comma as a separator. For example - `input[name=terminal], input[name=other], div.my-el input.even-other` – phts Nov 09 '14 at 13:54

Why jquery event doesn't handle?

update:

1 Answers1