Unable to get Id of draggable divs in jquery. (using jqery ui)

Question

For some reason the script below is unable to get the id of the draggable divs using attr('id'), but it works on the other static elements on the page. I am totally confused as to why this wont work and if anyone has a solution for me it would me much appreciated.

            $(document).ready(function(){
            //$(".draggable").draggable();
            $(".draggable").draggable({ containment: '#container', scroll: false });
            $(".draggable").draggable({ stack: { group: '#container', min: 1 } });


            $("*", document.body).click(function (e) {
                var offset = $(this).offset();// get the offsets of the selected div
                e.stopPropagation();
                var theId = $(this).attr('id');// get the id of the selceted div
                $("#result").text(this.tagName + " id=" + theId + " (" + offset.left + "," + offset.top +")");
                $.post("http://localhost/index.php", "id=" + theId + "&x=" + offset.left + "&y=" + offset.top); //post x,y to php (and the id of the elemnt)
            });

            var req = function () {
                $.ajax({
                    url: "out.php",
                    cache: false,
                    success: function(html){
                        $("#stuff").empty().append(html);
                        var css_attr = html.split(",");
                        $('#1').css('left', css_attr[0] + 'px').css('top', css_attr[1] + 'px');
                    },
                    complete: function(){
                        req();
                    }

                    });
            };
            req();

        });

Note: This script is dependent on the following JavaScript sources.

jquery.js

http://jqueryui.com/latest/ui/ui.core.js

http://jqueryui.com/latest/ui/ui.draggable.js

http://jqueryui.com/latest/ui/ui.droppable.js

Answer 1

Your click function works for me on a test page. Out of curiosity, if you move the 'e.stopPropogation()' line to the bottom of your click function, does it behave differently?

Answer 2

Be careful with *, you know, all means all, if you have <div><p><span><a></a></span></p></div> it means that the action is set to every single element. I'd specify classes or tags that should be affected by your function, to be always sure that you get what you want to be clicked.

Try your code replacing * with the object you think it's ID isn't get, and see if it works..

Answer 3

This may seem pretty obvious but are you sure that all the elements that your selecting actually have IDs. If your including everything (with the *) then it is likely that some elements don't have IDs.