將事件添加到jQuery

有人能告訴我爲什麼我不能單獨添加處理程序，而是必須執行下面的操作才能使其工作？將事件添加到jQuery

我的問題是爲什麼我應該添加隱藏$(document).ready()以使其工作的段落的代碼。

<!DOCTYPE html> 
<html> 
<head> 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script> 
<script> 
$(document).ready(function(){ 
    alert('test'); 
}); 
</script> 
<script> 
$("p").click(function(){ 
     $(this).hide(); 
    }); 
    </script> 
</head> 
<body> 

<p>If you click on me, I will disappear.</p> 
<p>Click me away!</p> 
<p>Click me too!</p> 

</body> 
</html>

工作代碼 -

<!DOCTYPE html> 
<html> 
<head> 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script> 
<script> 
$(document).ready(function(){ 
    $("p").click(function(){ 
     $(this).hide(); 
    }); 
}); 
</script> 
</head> 
<body> 

<p>If you click on me, I will disappear.</p> 
<p>Click me away!</p> 
<p>Click me too!</p> 

</body> 
</html>

來源

2017-02-28 Aaron Wilfred

敢肯定這是因爲DOM是不是在裝 –

在第一代碼片段中沒有定義點擊事件document.ready函數 – Maharshi

還有另外一個可以工作的選項：將JS放在主體的末尾，放在要嘗試引用的元素之後。 – nnnnnn

第一個片段中的問題是在加載文檔之前註冊的jQuery代碼，所以它不會識別任何HTML元素。因此它不會工作。

解決方案： -

1.Either把你的代碼在頁面的底部（在第一個的情況下）。

2.或者你已經在第二個代碼中完成你的代碼（$(document).ready(function(){..});）。

在這兩種情況下，上面的HTML元素正確加載和jQuery代碼之前註冊的，因此您的代碼將開始工作

來源

2017-02-28 04:18:22

其更改如下..

$(document).ready(function(){ 
 
    alert('test'); 
 
    $("p").click(function(){ 
 
     $(this).hide(); 
 
    }); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script> 
 
<p>If you click on me, I will disappear.</p> 
 
<p>Click me away!</p> 
 
<p>Click me too!</p>

來源

2017-02-28 04:10:47 Maharshi

這不是OP在第二個例子中*已經在做什麼嗎？他們問爲什麼第一種方式失敗，第二種方式起作用。 – nnnnnn

我給他的代碼。開發人員可以瞭解其差異。 – Maharshi

*「我的問題是爲什麼我應該在$（document）.ready（）中添加用於隱藏段落的代碼以使其工作。」* - 您甚至沒有試圖回答這個問題，並且顯示的代碼看起來與OP說他已經有效，但是增加了警報。 – nnnnnn

$(documet).ready(function(){})只在頁面解析，不論地點的所有DOM elements後執行。當你編寫沒有ready函數的代碼時，代碼將按順序執行。如果JavaScript代碼放在DOM元素外觀之前，它將不起作用。如果你把（第一種情況） -

<script> 
$("p").click(function(){ 
    $(this).hide(); 
}); 
</script>

只是標記之前，它將按預期工作 - 以確保在頁面解析的DOM元素利用$(documet).ready(function(){})。

來源

2017-02-28 04:16:03

這工作？ –

事件處理程序只能綁定到當前選擇的元素;它們必須在您的代碼調用'click'處理程序時存在。

你可以在以下幾個方面實現：

包含在這始終是最佳做法的HTML的身體末端的腳本。
包裝你的處理代碼到一個函數，並調用內部的document.ready該功能（）或body.onload（）。 document.ready（）是首選，因爲它不會等待圖像等資源，並在HTML內容加載後立即附加事件。
使用委託事件來附加事件處理程序。委託事件的優點是它們可以處理來自稍後添加到文檔中的後代元素的事件。

我會做這樣的：

(function(){ 
 
    $('p').on('click',function(){ 
 
    $(this).hide(); 
 
    }); 
 
})();

<!DOCTYPE html> 
 
<html> 
 
<head> 
 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script> 
 
<script> 
 
$(document).ready(function(){ 
 
    alert('test'); 
 
}); 
 
</script> 
 
</head> 
 
<body> 
 

 
<p>If you click on me, I will disappear.</p> 
 
<p>Click me away!</p> 
 
<p>Click me too!</p> 
 

 
<script src=""></script> 
 
</body> 
 
</html>

來源

2017-02-28 05:13:00

將事件添加到jQuery

回答

相關問題