给定的jQuery警报片段不起作用

Question

此javascript警报正在工作：

<script>
function myFunction() {
document.getElementById("tr_edit").innerHTML = "YOU CLICKED ME!";
}
</script>

但这个jQuery没有：

<script>
$(document).ready(function () {
$("#tr_edit").click(function () {
alert("The paragraph was clicked.");
});
});
</script>

我不明白我错过了什么。请帮忙。

Answer 1

它有效，我认为你的html 有问题

$(document).ready(function () {
$("#tr_edit").click(function () {
alert("The paragraph was clicked.");
});
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input type="submit" id="tr_edit">

Answer 2

它们都在工作，但您永远不会调用myFunction()

不过，为了保持一致性和简单性，最好使用jquery或纯javascript的解决方案。

// All jquery
$("#tr_edit_jquery").click(function () {
alert("Jquery was clicked.");
$(this).text("YOU CLICKED ME!");
});
// All vanilla
const div = document.getElementById("tr_edit_js");
function jsFunction() {
alert("Vanilla was clicked.");
div.innerHTML = "YOU CLICKED ME!";
}
div.addEventListener("click", jsFunction);

div {
padding: .5rem;
border: 1px solid #000;
display: inline-block;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script>
function myFunction() {
document.getElementById("tr_edit").innerHTML = "YOU CLICKED ME!";
}

$(document).ready(function () {
$("#tr_edit").click(function () {
alert("The mixed implementation was clicked.");
myFunction();
});
});
</script>
<div id='tr_edit'>click</div>
<div id='tr_edit_jquery'>jquery</div>
<div id='tr_edit_js'>vanilla</div>