jQuery 事件 live() 方法



jQuery 的 live() 事件方法用於將一個或多個事件處理程式附加到選定的元素,並指定在事件發生時執行的函式。

此方法主要用於將事件處理程式繫結到稍後新增到文件中的元素。

在 jQuery 1.7 版本中,live() 方法已棄用,並在 1.9 版本中刪除。您應該改用 on() 方法。

語法

以下是 jQuery 事件 live() 方法的語法:

$(selector).live(events, data, function)

引數

此方法接受三個名為“event”、“data”和“function”的引數,如下所述:

  • events - 包含 JavaScript 事件的字串。
  • data - 包含將傳遞給事件處理程式的資料的物件。
  • function - 在觸發事件時執行的可選函式。

返回值

此方法沒有任何返回值。

示例 1

以下是 jQuery 事件 live() 方法的基本示例:

<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7/jquery.min.js"></script>
</head>
<body>
    <p>Click on the below to hide this message.</p>
   <button>Click me</button>
</body>
<script>
    $('button').live("click", function(){
        $('p').slideToggle();
        //$('span').text("P element hidden");
    });
</script>
</html>

輸出

執行上述程式後,它會在段落元素內顯示一條訊息。當單擊按鈕時,訊息將隱藏:


示例 2

以下是 jQuery live() 方法的另一個示例。我們使用此方法來處理段落上的 mouseenter 事件:

<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7/jquery.min.js"></script>
<style>
    .demo{
        color: red;
        font-family: sans-serif;
        font-size: 25px;
        font-style: italic;
    }
</style>
</head>
<body>
    <p>Mouse enters to change the style.</p>
</body>
<script>
    $('p').live("mouseenter", function(){
        $(this).addClass("demo");
    });
</script>
</html>

輸出

執行上述程式後,當滑鼠指標進入選定元素時,它會顯示一條訊息,並且樣式將相應更改:


當滑鼠進入選定元素時:


示例 3

在下面的示例中,我們使用 jQuery live() 方法處理多個事件:

<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7/jquery.min.js"></script>
<style>
    a{
        display: inline-block;
        width: 100px;
        padding: 5px;
        text-decoration: none;
    }
    .demo{
        background-color: green;
        color: white;
        border-radius: 5px;
        transition: 1s;
    }
</style>
</head>
<body>
    <a href="#">Home</a>
    <a href="#">About Us</a>
    <a href="#">Contact Us</a>
    <a href="#">Blog</a>
</body>
<script>
    $('a').live("mouseenter mouseleave", function(event){
        $(this).toggleClass("demo", event.type === "mouseenter");
    });
</script>
</html>

輸出

執行上述程式後,它將顯示四個連結。當滑鼠指標進入或離開顯示的連結時,將自動向連結新增或刪除“demo”類,如下面的 GIF 所示:


jquery_ref_events.htm
廣告