jQuery clone element and events

jQuery 一般情況下,利用 clone() 來複製元素,但是複製元素後,並沒有複製原本元素綁定的事件及數據,這點有點困擾,之前是在Clone之後,重新綁定事件,但這樣會變得很麻煩,也會讓程式碼變得很亂,在 jQuery 1.4 以後 clone() 加了一個貼心的功能,可以在複製的時候選擇要不要連事件及數據一起複製。

Demo 程式如下:

這是一個簡單的範例,在按鈕上綁定一個click事件,點擊按鈕開啟警告窗

這示例程式,當我們點擊 “Clone” 這按鈕,會複製一個上方的 “Click Me”按鈕,當我們點下新產生的 “Click Me”按鈕並沒有任何反應,代表並沒有複製到原本元素綁定的事件及數據。

See the Pen jQuery clone element by VECTOR.cool
(@ann71727) on CodePen.

接著我們看下方程式碼,用相同動作,原本的 “Click Me” 按鈕及新複製出的 “Click Me” 按鈕,都可以正常運行綁定事件,換而言之,事件成功被複製,如此就不用重新綁定,非常省事呢!

[……]

Read more

jQuery 常用

$.param({
        year: 2009,
        country: "Canada"})
)
$(this).attr('coords').split(',');

 

Convert an array to a string:
var fruits = ["Banana", "Orange", "Apple", "Mango"];
fruits.toString();
The result of fruits will be:
Banana,Orange,Apple,Mango

 

[……]

Read more

jQuery selector 替代萬用字元 模糊查找元素

jQuery selector 替代萬用字元 模糊查找元素

HTML:

<ul>
  <li class="test_a">aaa</li>
  <li class="test_b">bbb</li>
  <li class="test_c">ccc</li>
  <li>ddd</li>
</ul>

jQuery:

<script type="text/javascript">
$(document).ready(function(e) {
    $('[class*=test]').each(function(index, element) {
        alert($(this).attr('class'));
    });
});
</script>

Demo Download 範例下載:

 [……]

Read more