press...">
Clever Geek Handbook

What is the use of event name with selector in jquery?

I have this html

<div class="wrapper">
  <div class="holder">
    <span class="pressy">press here..!!</span>
    <div class="inner">
        <span class="pressy">press here..!!</span>
    </div>
  </div>
</div>

and js

$('.wrapper').on('mousedown.inner','.pressy',function(e){
  alert($(this).attr('class'))
})

In fact, I am getting a warning for both "press" since I can only get it for an internal push

and one more thing is using

'mousedown.inner'

(not that. I'm asking about general usage) how can I use it correctly?

script: http://jsfiddle.net/4ayqqfnm/

thank..

+3


source to share


6 answers


You just need to change the JS like this:

$('.wrapper').on('mousedown.inner','.inner .pressy',function(e){
  alert($(this).attr('class'))
})


The persistence is mousedown.inner

optional (as @Arun says it applies to the event namespace) - it's not required here, but it doesn't hurt anything. The second part, .inner .press

y makes it a more specific selector and makes it ignore your first element.pressy

DEMO

0


source


It is called a namespace and is used to individually target these events.

Suppose you add a few clicks to a button and then only want to remove one of those handlers, how do you do that? $('button').off('click')

will remove all click handlers added to the button that is not what we want.

So the solution is to use namespaces like

$('button').on('click.myevent', function(){...})


then if we do

$('button').off('click.myevent')

it will remove only those click handlers that are added to the namespace myevent

+1


source


This should do what you want:

$('.wrapper').on('mousedown', '.inner .pressy', function (e) {
    alert($(this).attr('class'))
})

In a function, on

it ignores .

something like that, so I introduced a selector .inner

for the next argument to only target your intended target.

0


source


The above answer works, one can also do

 $('.inner').on('mousedown','.pressy',function(e){
    alert($(this).attr('class'))
 })

Which, since the movie clip is targeting the presses class inside .inner

http://jsfiddle.net/9krgu4ge/

0


source


The only change you have to make is to specify a delegated selector that only cares about .pressy

internally .inner

, not each one .inner

.

$('.wrapper').on('mousedown.inner','.inner .pressy', function(e){
    alert($(this).attr('class'))
});

The only thing that does .on('mousedown.inner', ...

is namespace your event handler, so you can remove them by namespace later without removing all other handlers mousedown

on .wrapper

.

FIDDLE

0


source 


$('.wrapper').on('mousedown','.inner > .pressy',function(e){
    alert($(this).attr('class'))
    })
0


source






More articles:


All Articles