jQuery 仅在函数内调用时点击才起作用

Question

当我使用 .click() 这些方法时，它不起作用：

$(document).ready($("#addPosition").click(function(event) {
  console.log("I'm in HTML .ready()");
  event.preventDefault();
}))

$($("#addPosition").click(function(event) {
  console.log("I'm in HTML $()");
  event.preventDefault();
}))

但是如果我用这段代码创建一个函数并在不带括号的情况下调用它，它就可以工作：

function doPosition() {
$("#addPosition").click(function(event) {
  console.log("I'm in function");
  event.preventDefault();
})}
$(doPosition);

这是 HTML 部分：

<p>Position: <input type='submit' class="btn-sm btn btn-light" id='addPosition' value='+' /></p>

Answer 1

你必须在文档中传递一个函数就绪

像这样

//$(document).ready(() => {
//  $("#addPosition").click(function(event) {
//    console.log("I'm in HTML .ready()");
//    event.preventDefault();
//  })
//})

//or for short

$(() => {
  $("#addPosition").click(function(event) {
    console.log("I'm in HTML .ready()");
    event.preventDefault();
  })
})

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<button id="addPosition">CLICK</button>

jQuery 仅在函数内调用时点击才起作用

jQuery click working only when called within a function

javascript

html

jquery