前一段時間面試的時候，面試官問了這么一個問題說：Jquery中on和bind有什么區別？當時就一臉懵逼了，因為雖然一直用$("#id").bind("click",function(){})或者$("#id").on("click",".class",function(){})。但是真的問起來，他倆有什么區別還真的不知道。

這樣，我們先從寫法來看，bind后邊參數一般就是綁定事件加方法；on后邊的參數相比bind來說，多了一個selector。這就是他們的區別。我們可以通過幾個開發中很容易遇到的情況來分析：

情況一：在一個頁面上，有多個塊，每個塊的class是不同的，但是塊中的子元素的class是相同的。這個時候你要給content1下的子元素的child綁定事件，用bind肯定是不可以的，因為這樣會對所有的child元素綁定事件。但是用on就可以完美解決，給特定唯一父元素下的子元素綁定事件。

<div class="content1"><div class="child"></div> </div> <div class="content2"><div class="child"></div> </div> <div class="content3"><div class="child"></div> </div> <script>/*$(".child").bind("click",function () {//bind綁定事件})*/$(".content1").on("click",".child",function () {//on綁定子元素事件 }) </script>

情況二：對于動態加載的class進行綁定事件。頁面對于js只在加載的時候渲染一次，用on就可以對新添加的進行重新渲染，給動態添加的也加上綁定事件。

<style>.show-red{color: red;}.show-yellow{color: yellow;} </style> <div class="content1">123</div> <div class="content2">456</div> <script>$(".content1").addClass("show-red");$(".content2").addClass("show-yellow");/*$(".show-red").bind("click",function () {//bind給show-red綁定事件})*/$(".content1").on("click",".show-red",function () {//on給show-red綁定事件 }) </script>

綜上：on可以將子元素的事件委托給父元素進行處理；on可以給動態添加的元素加上綁定事件。

?

轉載于:https://www.cnblogs.com/Toby-hou/p/7927675.html

總結

以上是生活随笔為你收集整理的on和bind的区别，以及js重新渲染问题的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。