ondblclick won't work on element with onclick javascript

Question

I have the following problem: I have an image.When the user clicks it it will display an alert box but I also want to remove it if the user double clicks it. I have the following markup but it is not working.

<h1>hello </h1>
            <img src="smile.png" class=" center-block" onclick="alert('Hello')" ondblclick="$('img').remove();">

The only working part is the alert button
Note: jquery is loaded

Answer 1

From MDN :

Dialog boxes are modal windows - they prevent the user from accessing the rest of the program's interface until the dialog box is closed. For this reason, you should not overuse any function that creates a dialog box (or modal window).

If you're triggering an alert() on click, the UI will be disabled and you can not perform an immediate follow up click without closing the alert() . ( You should be hearing a warning sound )

Answer 2

don't use inline javascript when you want to specify element, in your something.js write:

$('.center-block').dbclick(function(){
  $('img').hide();
});

Answer 3

This works for what you are trying to accomplish in your code:

jsfiddle example: http://jsfiddle.net/larryjoelane/gz4gst49/14/

With the code below placed in a script tag at the bottom of your body document you still use the alert if you want:

<script>


//the class to click on
var selector = ".center-block";

//set the doubleClicked variable to 0 meaning false
//in this example
var doubleClicked = 0;

//on single click function for selector class
$(selector).on("click",function(){//begin function


//use time out function to delay execution for specified amount
//of time in this case I used 2 seconds
setTimeout(function () {

    //if doubleClicked equals 0
    if (doubleClicked === 0){//begin if then

            //display alert
            alert("hello");

    }//end if then else

    }, 2000);//<--delay set for two seconds

});//end function

//on double click function
$(selector).on("dblclick",function(){//begin function

    //set doubleClicked to 1 
    doubleClicked = 1;

    //remove the img element
    $("img").remove();


});//end function

 </script>

Answer 4

You might want to detect the dbl-click yourself (using a timer).

The basic concept in pure javascript works like this:

 <img class=" center-block" src="http://i.stack.imgur.com/pucwG.png" onclick="clearTimeout(this.timer); //catch the second click of dbl-click this.timer=setTimeout(function(){ alert('Hello'); }, 250);" ondblclick="clearTimeout(this.timer); this.parentNode.removeChild(this);" > 

In this example we simply hook the timer-id (the return-value of setTimeout ) to the originating element.
Passing an invalid ID to clearTimeout does not have any effect (and doesn't throw an exception), so we don't even need to check for it's existence.
A delay-time of 250 ms is usually enough (150ms is usually to short).

Note: is recommended to use more advanced methods to hook your events instead of in-lining them as you have done.