Question

I have an MVC 3 site. I’ve created a navigation bar that looks like the following:

<div data-role="navbar">
    <ul>
        <li>
            <a href="#ProfileView" class="ui-btn-active">
                <img src='@Href("~/Content/img/Profile.png")' alt="Profile" />
            </a>
        </li>
       .
       .
    </ul>
</div>

What gets rendered for one of the buttons is:

<a class="ui-btn-active ui-btn ui-btn-up-c" href="#ProfileView" data-theme="c">
  <span aria-hidden="true" class="ui-btn-inner">
    <span class="ui-btn-text">
       <span aria-hidden="true" class="ui-btn-inner">
          <span class="ui-btn-text">
             <span aria-hidden="true" class="ui-btn-inner">
                <span class="ui-btn-text">
                   <span aria-hidden="true" class="ui-btn-inner">
                       <span class="ui-btn-text">
                <img alt="Profile" src="Content/img/profile.png">
            </span>
                   </span>
                </span>
              </span>
           </span>
        </span>
     </span>
   </span>
</a>

I was trying to compare mine to JQuery Mobile’s demo site. It looks the same to me, but it’s not working… So did I miss something? What typically causes the repetitiveness shown in this example?

Thanks.

Answer 1

Add data-role="none" to elements you don’t want to render as a button. Then compare your output and see if you are still getting the extra rendering. Most likely you have an open tag, or are refreshing the listview multiple times.