testing event sequence using jquery

StackOverflow https://stackoverflow.com/questions/9528152

Pergunta

Hi I am trying to see what events get triggered as suggested at the following link. However, I don't see the alerts.. what is wrong here?

<!DOCTYPE html> 
<html> 
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1"> 
    <title> test ground</title> 

    <!-- JQuery specific -->
    <script type="text/javascript" src="libs/jQuery/jQuery.min.js"  ></script>

    <script>
    $(document).ready( function() {
        $.each([
            'blur',  'change',   'click',  'contextmenu', 'copy',
            'cut',   'dblclick',   'error', 'focus',
            'keydown',          'keypress',         'keyup',
            'mousedown',            'mousemove',            'mouseout',
            'mouseover',            'mouseup',
            'mousewheel',           'paste',
            'reset',            'resize',
            'scroll',           'select',
            'submit',
            // W3C events
            'DOMActivate',          'DOMAttrModified',          'DOMCharacterDataModified',
            'DOMFocusIn',           'DOMFocusOut',          'DOMMouseScroll',
            'DOMNodeInserted',          'DOMNodeRemoved',           'DOMSubtreeModified',
            'textInput',

            // Microsoft events
            'activate',
            'beforecopy',
            'beforecut',
            'beforepaste',
            'deactivate',
            'focusin',
            'focusout',
            'hashchange',
            'mouseenter',
            'mouseleave'
        ], function () {
            $('a').live(this, function (evt) {
                alert(this);
            });
        });
    });
    </script>
</head>
<body>
<a href="http://www.google.com"> test </a>
</body>
</html>
Foi útil?

Solução

I guess this in the callback context is being wrapped as an object and hence the issue I guess(checked in Firefox and Chrome latest versions.) Change the callback to:

function (a, b) {
        $('a').live(b, function (evt) {
                alert(evt.type);
        });
}

or

function () {
        $('a').live(this.toString(), function (evt) {
                alert(evt.type);
        });
}

Will update the post with a more detailed description once I figure out the reason this is wrapped as an object.

Outras dicas

I've copy pasted the original code from the stack overflow post and it worked perfect for me. here is the link to jsfiddle

The first time you call this it's an object - make it a string

  $('a').live(this.toString(), function (evt) {

Try this:

<script>
$(document).ready( function() {
    var el = $("#doIt");

    $.each([
        'blur',  'change',   'click',  'contextmenu', 'copy',
        'cut',   'dblclick',   'error', 'focus',
        'keydown',          'keypress',         'keyup',
        'mousedown',            'mousemove',            'mouseout',
        'mouseover',            'mouseup',
        'mousewheel',           'paste',
        'reset',            'resize',
        'scroll',           'select',
        'submit',
        // W3C events
        'DOMActivate',          'DOMAttrModified',          'DOMCharacterDataModified',
        'DOMFocusIn',           'DOMFocusOut',          'DOMMouseScroll',
        'DOMNodeInserted',          'DOMNodeRemoved',           'DOMSubtreeModified',
        'textInput',

        // Microsoft events
        'activate',
        'beforecopy',
        'beforecut',
        'beforepaste',
        'deactivate',
        'focusin',
        'focusout',
        'hashchange',
        'mouseenter',
        'mouseleave'
    ], function (index, value) {
        el.on(value, function (evt) {
            console.log("Whatever %o", this);
        });
    });
});
</script>

Basically made sure to grab the element only once (no need to call jQuery a boat-load), and then took the event name from the function called by .each().

Licenciado em: CC-BY-SA com atribuição
Não afiliado a StackOverflow
scroll top