Results 1 to 2 of 2

Thread: Onclick issue with multiple objects

  1. #1
    Join Date
    Mar 2011
    Location
    N 11 19' 0.0012 E 142 15' 0
    Posts
    1,524
    Thanks
    41
    Thanked 89 Times in 88 Posts
    Blog Entries
    3

    Default Onclick issue with multiple objects

    G'day all.

    I have the following code (I've removed parts and only left in the relevant sections)(sorry if there are any syntax errors but there aren't in the full version):

    Code:
    $.fn.game = function(args) {
        for(var key in args.objects) {
                    if(typeof args.objects[key].exec.mousedown == "function") {
    			$("#" + key).mousedown(function() {
    				args.objects[key].exec.mousedown();
    			});
    		}
        }
    }
    Code:
    $("#gameParent").game({
    	objects : {
    		main : {
    			hooks : {
    				mousedown : function() {
    					console.log("test");
    				}
    			}
                    },
    		enemy : {
    			hooks : {
    				mousedown : function() {
    									
    				}
    			}
    		}
    	}
    });
    The idea is to the ability to create objects (for a game) then hook events on them.
    When clicking on either of the objects, the hooks.mousedown() is called twice for the enemy object and not at all for the main object.

    This is because args.objects[key].exec.mousedown(); runs onmousedown, which is triggered after both the objects have been looped over. This means that key will only ever point to the last object on the list.

    I have no clue how to work around/restructure to fix this.

    Any suggestions?
    Last edited by keyboard; 12-18-2013 at 01:15 AM.

  2. #2
    Join Date
    Mar 2005
    Location
    SE PA USA
    Posts
    29,025
    Thanks
    44
    Thanked 3,210 Times in 3,172 Posts
    Blog Entries
    12

    Default

    I'd try adding a self executing anonymous closure function:

    Code:
    $.fn.game = function(args) {
        for(var key in args.objects) {
                    if(typeof args.objects[key].exec.keydown == "function") {
                    	(function(k, f){
    				$("#" + k).mousedown(f);
    			})(key, args.objects[key].exec.mousedown);
    		}
        }
    }
    Either way, all I get is:

    Cannot read property 'keydown' of undefined
    I'm assuming that's not the case in the actual code environment. If it is, nothing will work.

    Here's a working example:

    Code:
    <!DOCTYPE html>
    <html>
    <head>
    <title></title>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8/jquery.min.js"></script>
    </head>
    <body>
    
    <div id="main">Main</div>
    <div id="enemy">Enemy</div>
    
    <script type="text/javascript">
    $.fn.game = function(args) {
        for(var key in args.objects) {
                    if(typeof args.objects[key].exec.keydown == "function") {
                    	(function(k, f){
    				$("#" + k).mousedown(f);
    			})(key, args.objects[key].exec.mousedown);
    		}
        }
    }
    
    $("#gameParent").game({
    	objects : {
    		main : {
    			exec : {
    				mousedown : function() {
    					console.log("test");
    				},
    				keydown: function(){}
    			}
                    },
    		enemy : {
    			exec : {
    				mousedown : function() {
    					console.log("test2");
    				},
    				keydown: function(){}
    			}
    		}
    	}
    });
    </script>
    </body>
    </html>
    Here's another solution:

    Code:
    $.fn.game = function(args) {
        for(var key in args.objects) {
                    if(typeof args.objects[key].exec.keydown == "function") {
    			$("#" + key).mousedown(function() {
    				args.objects[this.id].exec.mousedown();
    			});
    		}
        }
    }
    But, since it relies upon the coincidence that key is the element's id, it's not as widely applicable.

    If you want more help, please include a link to the page on your site that contains the problematic code so we can check it out.
    Last edited by jscheuer1; 12-17-2013 at 05:19 PM. Reason: add working code
    - John
    ________________________

    Show Additional Thanks: International Rescue Committee - Donate or: The Ocean Conservancy - Donate or: PayPal - Donate

Similar Threads

  1. Help adding multiple drag and drop objects
    By kyero in forum JavaScript
    Replies: 2
    Last Post: 05-10-2013, 11:10 AM
  2. Onclick multiple actions?
    By harlem in forum JavaScript
    Replies: 2
    Last Post: 01-22-2010, 10:49 AM
  3. Replies: 8
    Last Post: 02-04-2009, 08:17 PM
  4. Replies: 7
    Last Post: 05-12-2006, 07:18 PM
  5. Multiple onclick events
    By fambi in forum JavaScript
    Replies: 5
    Last Post: 03-30-2006, 04:01 PM

Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •