Html onclick firing twice in Android

5
votes

Code: 

function hello(){alert("Hi");}; 

<center> 
<table border="0" height="100%">
<tbody>
            <tr>
                <td align="center" width="100%">
                <img src="cover.png"
                    width="300" height="300" id="image"></img></td>
            </tr>
            <tr>
                <td height="100%">&nbsp;</td>
            </tr>
            <tr>
                <td align="center">
             <form onsubmit="go();return false">  
                        <input class="answer" id="answer" name="answer"
                             onclick="hello();"/>
                  </form> 
                </td>
            </tr>
            <tr>

            </tr>
        </tbody>
</table>
</center>

I have been trying to capture when the answer text box is clicked in HTML. It works perfectly in Firefox and Chrome (I only get one Hi alert), but the onclick method fires twice when I try to run the code in a web-view in android (I get two Hi alerts). However, when I call the same function later it works properly, firing only one Hi alert.

<div style="bottom: 0; right: 0; position:absolute;  margin-right:5%">
    <a><img alt="" src="start.png" id="submit" onclick="go();hello();"></a>
    </div>

I'm guessing it has something to do with the fact that I'm calling the function from inside the form and it's somehow firing the event twice but I have no idea how to fix it. Any help?

1
androidhtmlonclick

1 Answers

0
votes

You could try using one() as follows.

$('#answer').one('click', function() {
    alert("Hi");
});

<form onsubmit="go();return false">  
   <input class="answer" id="answer" name="answer"/>
</form>