I create a popup,when I click the button refer to the popup, the popup doesn't show, when I use api:  $("#addCatoPopup").popup("open"),  the popup shows. what wrong?

My code is below:

<div data-role="header">
 <a data-role="button" data-rel="back" href="#" data-icon="back">Back</a>
    <h1>Catogery List</h1>
    <a data-rel="popup" data-position-to="window" href="#addCatoPopup" data-icon="plus" data-role="button" id = "catoAddBtn">Add</a>
  
</div>
<div data-role="content">
    <ul data-role="listview" data-split-icon="delete">
        <li>
            <a href="#editCatoBtn" data-rel="popup" data-transition="pop"><h2>Work</h2></a>
            <a href="#delCatoBtn" data-rel="popup" data-transition="pop">text</a>
        </li>
     </ul>
</div>

 <div id="addCatoPopup" data-role="popup" data-icon="delete">
  <DIV style="PADDING-BOTTOM: 10px; PADDING-LEFT: 20px; PADDING-RIGHT: 20px; PADDING-TOP: 10px">
        <form>
            <p>Please Enter Catogery Name:</p>
            <label for="catoName"></label>
            <input id="catoName" placeholder="Catogery Name">
            <BUTTON type=submit data-icon="check" data-theme="b">Submit</BUTTON>
         </form>
     </DIV>
</div>