If Clicked Don t Do the Action Again Jquery
I would like to phone call a script divers inside script tags in the Head section of the jsp.
-
<head> <link rel = "stylesheet" type = "text/css" href = "jquerymobile/jquery.mobile-ane.0a1.min.css" />
<script type = "text/javascript" src = "jquerymobile/jquery-1.4.three.min.js" ></script>
<script type = "text/javascript" src = "jquerymobile/jquery.mobile-1.0a1.min.js" ></script> <script>$
( "#button" ). click ( role ()
{
alert ( 'push button clicked' );
}
);
</script> </head> <torso>
<html:errors/> <div data-role = "page" information-theme = 'a' > <div information-role = "header" >
<h1> jquerymobile </h1>
</div> <div data-role = "content" >
<div id = "button" data-role = "button" > Click on button </div>
</div> </div>
</body>
When the Button is clicked, I want the alert to be shown. But goose egg happens when the button is clicked.
Where am I going incorrect?
Replies(17)
Hi,
Your script is non executed when the DOM is ready. Effort to put information technology like that:
$(role() {
$ ( "#push button" ). click ( function ()
{
alert ( 'button clicked' );
}
);
});
Regards,
Dominique VINCENT
http://www.toitl.com/
Thanks Dominique
That doesn't solve the problem notwithstanding 
I am trying something so simple, yet not working. Surely I am going incorrect somewhere!
Whatsoever other suggestion?
Thanks again.
The reason is because when you create a button, jQM transforms it by hiding the original button ("#button") and creating a nicely styled anchor tag which is what is actually seen. Your binding to #button did work merely when you tested yous were never really clicking that push button so the handler never triggered.
I haven't seen any ameliorate answers and don't think there are whatever currently, so to become this working y'all need to do:
- $("#button").prev("a.ui-btn").unbind().click( function() {alert('button clicked');} )
That selects the bodily control visible to the user that jQM generates, unbinds all events from it since you're wiring up your own then do it to be prophylactic (buttons effort to machine ajax-submit and then may not work without the unbind), and and so adds your click handler.
Hey Mike
That's a great response. What about other elements such as input's I posted a question 3 days ago about preventing the keyboard displaying when I focused on it. Will this practise the aforementioned thing by unbinding the newly created input field?
Thanks a lot Mike for the detailed respond. All the same, I am nonetheless seeing the problem.
Isnt in that location a simpler way to call the script - like onclick="callSomeFunction();"?
For instance,
- <a id="button" data-function="button" onclick="callSomeFunction();">Click on Button</a>
Here is my two cents about this upshot: I recall the handler is divers too early on and that the DOM element having the ID "button" does not exists yet.
Attempt executing the code that bind the listener to the "click" event in the "onload" event listener to exist sure the DOM is ready.
JQ offering an helper for this:
$(certificate).set up(handler)or$(document).load(handler) (according to JQuery medico, this two function are not compatible...)
@lee.lesmith - I don't actually know much about the keyboard event... I idea the keyboard displaying when focusing on an input field was handled by mobile browsers. If it is triggered peculiarly by jQM, unbinding should piece of work I'd approximate and if not and so there may be a 'live' event somewhere controlling that for all pages inputs which would require inspecting jQM framework to see how it's beingness set to make exceptions. And just an FYI in example, input boxes in jQM don't do whatever transformations so when you bind to them at that place's no worrying most what element do I actually need to target like the submit buttons.
@vanithak.2000 - Doing an inline outcome handler past calculation an "onclick" attribute to the button like in your last example will never piece of work since the button itself is subconscious after jQM'due south transformation magic and thus will never be able to be clicked. The issue needs to instead be binded from the 'pageshow' issue, jQM'due south equivalent of document.set due to folio caching (best solutions here). If the lawmaking snippet I gave you before didn't piece of work then it was considering information technology wasn't binded at the right fourth dimension/place or there was a context problem... all difficulties that come with the jQM caching arrangement that need worked around. Only to show you a possible betoken of failure, if you take 2 buttons on completely separate pages in your app and each has an ID of "push"... this seems fine but since all the pages are cached in the DOM then the IDs are duplicated so you lot could be accidentally binding to an element on another folio if not careful and it volition seem like nothing is working. Basically to be conscientious I never exercise any jQuery selectors without a context which should ALWAYS exist ready to the current page and then I would always do $("#button", $.mobile.activePage) to be sure I have the right one. Also another possibility, if your original full html source example was not called from the app with a rel="external" then the javascript is never run at all since information technology simply fetches but the page container data with ajax and inserts into the DOM... this would be a example where all javascript needs run from the 'pageshow' event from your root index page to the app (best solutions link above will explain this more probably).
Mike: It appears the document is not loaded when your lawmaking runs. I made the following change and information technology worked for me.
$(document).ready("#button").click(function() {
alert('button clicked');
});
Skilful luck, Rich
Hullo Mike The following lawmaking brings up the alert in Firefox Browser. But the aforementioned does not work with Opera Mobile & Fennec browsers - where it shows the Error Loading Page dialog.
- $ ( document ) . fix ( role ( ) {
- $ ( "#vbutton" ) . click ( function ( ) {
- warning ( "clicked" ) ;
- } ) ;
- } ) ;
- < a id = "vbutton" information-role = "push button" > Click Push button </ a >
Any reason why?? This is important because I am about interested in making the site work with Mobile browsers.
How-do-you-do Mike
Any reason why the behavior is dissimilar betwixt a desktop browser like Firefox & Mobile browsers like Fennec & Opera Mobile?? I go the Fault Loading Page dialog in mobile browsers. No idea whats going on
How to troubleshoot such an issue?
Hi Mike
Found out the reason for the dissimilar beliefs - javascript debug statements like "debugger;", "console.log" - were causing the trouble in Fennec & Opera Mobile. Just commented out the debug statements and things are fine at present.
Hi Mike,
I am as well facing with the same problem, the click outcome is not working if i use the below line :
<push information-theme="b" id="submit" information-part="button" type="submit">Submit</button>
However, it is working fine if i supplant push button with anchor similar this :
<a id="submit" data-role="push button" >Submit</a> .
The above issue is consequent across diff browsers. Please respond dorsum.
I also run into DOM events treatment (click, touch, etc) in a JQM/phonegap project. Phonegap does not have any document or sample for JQM integration.
I can't pass parameter to a folio with JQM from a un-ordered list that is dynamically populated from the database.... I have to bind some CLICK listening function to capture and pass parameter to a page. Simply the click (or touch) event never seemed to fire consistently. I tried with JQuery DOM selector, ID, and grade name to capture the click/touch event. None worked quite correct.
This is definite a huge problem with electric current JQM alpha.
I had the same problem.
I looked in the docs and noticed that all of the buttons were defined using anchor tags. So I switched from:
<button>start</button>
to
<a href='#' data-part='button'>first</a>
And so my onclick event worked fine:
$('a:contains("start")).click ......
do this
<button type="reset" onclick="javascript part();">login</button>
This will make certain the button merely fire javascript call instead of do a post.
I had this issue too, just I likewise am trying to use asp.net and all it'southward glory. What I concluded upwardly doing was replacing the href of a tags with a javascript call
ex.
function doSomething(){ warning("howdy");}
<a href="javascript:doSomething()" data-role='button">Click Me</a>
Alternatively if you don't need to use unobtrusive javascript you lot could only do:
<input type="button" value="ButText" onclick="someFunction();" />
I've used this in couple of places and it seems to be working fine.
Source: https://forum.jquery.com/topic/calling-a-script-when-button-clicked
0 Response to "If Clicked Don t Do the Action Again Jquery"
Post a Comment