CODEWITHSUNDEEP
javascriptjqueryjquery-mobiledom
nathansizemore
nathansizemore

Reputation: 3196

Grabbing ID Field from Element jQuery Each

I'm trying to cycle through all of the children in a <ul> list, assign an onclick event listener and use the ID of the element for that event. I am using jQuery and jQueryMobile in my application. For some reason, the ID property of the element always shows up blank? When I alert the actual element, I get [ObjectHTMLLIElement]. When I use the DevTools, the ID field is present in all of the Elements?

This is the ListView

This is how I am trying to accomplish this...

function set_onclicks()
{
    var count = $('#main-listview').children().length;
    if (count > 0)
    {
        $('#main-listview').children().each(function() {
            this.onclick = function() {
                project_id = this.id;
                $.mobile.changePage('#main-project-page', 'slide', true, true);
            }
        });
    }
}

Can anyone point me in the right direction and help explain why I cannot grab the ID? Thanks in advance for any help!

Nathan

Recent Edits

I have tried implementing this, now that I know I do not need to bind through the .each() loop.

$('#main-listview').children().click(function() {
    alert(this);
    alert(this.id);
    project_id = this.id;
    $.mobile.changePage('#main-project-page', 'slide', true, true);
});

The first alert gives me [ object HTTMLLIElement ] the next alert gives me a blank...?

EDIT 2 - HTML Example I think I know why now. jQueryMobile is adding some <div> elements before it adds an <a> link. Now, I am going to have to figure out how to get around this..

<ul data-role="listview" data-inset="true" data-filter="true" data-filter-theme="a" id="main-listview" class="ui-listview ui-listview-inset ui-corner-all ui-shadow">
    <li data-corners="false" data-shadow="false" data-iconshadow="true" data-wrapperels="div" data-icon="arrow-r" data-iconpos="right" data-theme="a" class="ui-btn ui-btn-icon-right ui-li-has-arrow ui-li ui-first-child ui-btn-up-a">
        <div class="ui-btn-inner ui-li">
            <div class="ui-btn-text">
                <a id="51e0278f2a1cb33a08000002" class="ui-link-inherit">123456 - The Project</a>
            </div>
            <span class="ui-icon ui-icon-arrow-r ui-icon-shadow">&nbsp;</span>
        </div>
    </li>
</ul>

Upvotes: 0

Views: 321

Answers (2)

Adil
Adil

Reputation: 148140

You are trying to access this in javascript event handler which you can not unless you bind it by jQuery object

Change

this.onclick = function() {
            project_id = this.id;
            $.mobile.changePage('#main-project-page', 'slide', true, true);
        }

To

$(this).click( function() {
            project_id = this.id;
            $.mobile.changePage('#main-project-page', 'slide', true, true);
});

Simple solution You do not have to check if elements are returned by selector before bind, thanks to jquery, made life easy and you do not need to use each for binding event.

$('#main-listview').click(function() {           
   project_id = this.id;
   $.mobile.changePage('#main-project-page', 'slide', true, true);          
});

Upvotes: 1

bipen
bipen

Reputation: 36531

i have no idea why you are using function to set the click event.. (and no need to use loop $.each to set the click event for each elements).

just this should work

  $('#main-listview').children().click(function() {
             project_id = this.id;
            $.mobile.changePage('#main-project-page', 'slide', true, true);
        }
    });

Upvotes: 1

Related Questions