0

I have a button in my page which basically returns an alert as a sample. The button fires only one time. I checked previous entries and changed to event. The current event is like below

  $("#save_button").on("click", "#save", function() {
    alert("Button clickeddddd");

  });

the html is as below

>     <body>
>         
>     <div data-role="page" data-theme='b'>
> 
> 
>         <div data-role="header" data-position="fixed" data-tap-toggle="false" data-theme='b'>
>             <a href="index.html" data-ajax="false"><i class='icon-tablet icon-medium'></i></a>
>             <h1>Languages</h1>
>         </div>
>         
>         <div data-role="content">   
> 
>               
>             <form>
>                 <ul data-role="listview" data-inset="true">  
>                   
>                     <li data-role="fieldcontain">
>                         <label for="language" class="select">Language:</label>
>                         <select name="language" id="language" data-native-menu="true">
>                             <option value="en">English</option>
>                             <option value="de">German</option>
>                         </select>
>                     </li>
> 
>                     <li>
>                         <fieldset class="ui-grid-solo" id="save_button">
>                                 <div class="ui-block-a"><button type="submit" data-theme="b" id="save">Save</button></div>
>                         </fieldset>
>                     </li>
>                 </ul>
>             </form>
>           
>         </div>
> 
>       <div data-position="fixed" data-tap-toggle="false"
> data-role="footer" data-tap-toggle="false" data-theme='b'>            <div
> data-role="navbar">
>               <ul>
>                   <li><a href="languages.html" data-icon="globe" id="languages"></a></li>
>                   <li><a href="themes.html" data-icon="eye-open" id="themes"></a></li>
>                   <li><a href="settings.html" data-icon="cog" id="settings"></a></li>
>                   <li><a href="login.html" data-icon="signin" id="login"></a></li>
>               </ul>           </div>      </div>
> 
>     </div>
>     
>     </body> </html>

I tried to use the id="save_button" in several places (div : all levels), li, ul, form etc. in every place the event works only one time. afterwards it doesnt work.

1 Answer 1

2

You could delegate event to document level to handle any dynamic element:

$(document).on("click", "#save", function() {
    alert("Button clickeddddd");

  });

Please read:

jQuery delegation

Sign up to request clarification or add additional context in comments.

Comments

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.