CODEWITHSUNDEEP
javascriptjquerymutation-events
Kiran
Kiran

Reputation: 5526

testing event sequence using jquery

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>

Upvotes: 0

Views: 332

Answers (4)

Kamran Ali
Kamran Ali

Reputation: 5954

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

Upvotes: 1

Chandu
Chandu

Reputation: 82943

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.

Upvotes: 1

Adam Presley
Adam Presley

Reputation: 549

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().

Upvotes: 0

Steve
Steve

Reputation: 1112

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

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

Upvotes: 0

Related Questions