双击jQuery

Question

I'm trying to make my webpage alert text when an element has been double-clicked using jQuery. Here's my JS:

$("#dashboard-acrs-map").dblclick(function () {

    alert("asdasdasdasd")

})

And HTML:

<div class="dashboard-acrs-map-div" id="dashboard-acrs-map"></div>

Am I doing something wrong? Because the alert doesn't come up...

Note: It seems to be working UNLESS the element (#dashboard-acrs-map) is created using JS. How can I fix this?

Answer 1

That pretty much has to be your selected element not existing. It is possible that the script runs before the element is loaded. Place the script at the end of the body for example to make sure this is not the case.

 $("#dashboard-acrs-map").dblclick(function () { alert("asdasdasdasd") }) 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div id="dashboard-acrs-map"> Element </div> 

Dynamic element creation example:

 document.querySelector("button").onclick = () => { var element = document.createElement("div"); element.id = "double-click-me"; // Who cares though? element.textContent = "Double Click Me"; element.ondblclick = () => alert("Double!"); // Hook up double click here. document.body.appendChild(element); }; 

 <button>Create Double-Clickable</button> 

_{(Furthermore, i believe that jQuery should never be used.)}