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.