.on()與.bind()方法

Posted on 2014-09-24 Edited on 2023-11-24 In jQuery Views: Disqus:

一、.on()

.on( String events [, String selector ] [, Anything data ], Function handler )

.on( PlainObject events [, String selector ] [, Anything data ] )

其用來附加事件處理器於指定元素上

1、範例一

<!DOCTYPE html>
<html>
<head>
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
    <script>
        $(document).ready(function () {
            $("p").on("click", function () {
                alert("The paragraph was clicked.");
            });
        });
    </script>
</head>
<body>

    <p>Click this paragraph.</p>

</body>
</html>

此範例功能為「於<p>集合裡，掛載click事件，也就是說當p element被按下之後就會執行click事件

，秀出"The paragraph was clicked."」

2、範例二

與上面寫法結果相同，但是目地不太一樣。

<!DOCTYPE html>
<html>
<head>
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
    <script>
        $(document).ready(function () {
            $("body").on("click", "p", function () {
                alert("The paragraph was clicked.");
            });
        });
    </script>
</head>
<body>

    <p>Click this paragraph.</p>

</body>
</html>

此範例功能為「於<body>集合裡，針對所有的<p>元素，掛載click事件」，

也就是說當p element被按下之後就會執行click事件，秀出"The paragraph was clicked."」

3、範例三

上面的範例會衍生出一個議題「Direct and delegated events」。

如何在新增後，建構DOM時，也能再把更新click事件附加上去？

如下範例，按下新增按紐後，會再添加一列tr元素，

但卻發現新增的更新按紐click事件卻無反應，如何再把更新click事件附加上去呢？

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width">
    <script src="https://code.jquery.com/jquery-3.1.0.js"></script>
</head>
<body>
    <div id="wapper">
        <table>
            <tbody>
                <tr>
                    <td>
                        <input type="hidden" name="id" value="1" />
                        <input type="text" name="name" value="aaa" />
                        <button class="reflash">更新</button>
                    </td>
                </tr>
            </tbody>
        </table>
    </div>

    <hr>
    <div>
        <input type="text" id="txtCreate" name="txtCreate" value="bbb" />
        <button class="create">新增</button>
    </div>

    <script>
        $(".reflash").click(function myfunction() {
            alert("has been trigger");
        });

        $(".create").click(function myfunction() {
            var id = $("tr").length + 1;
            var name = $(this).siblings().get(0).value;

            var textTrTdStart = "<tr><td>";
            var textTdTrEnd = "</td></tr>";
            var textButton = " <button class='reflash'>更新</button>";
            var textId = "<input type='hidden' name='id' value='" + id + "' />";
            var textName = "<input type='text' name='name' value='" + name + "' />";
            $("#wapper>table>tbody").append(textTrTdStart + textId + textName + textButton + textTdTrEnd);
        });
    </script>
</body>
</html>

由於$(".reflash").click();只會在第一個頁面生成的時間點直接把事件處理器給附加上去，

而接下來動態生成的DOM就算已經寫上class="reflash"也不會有事件被附加上去，

所以要改成委派方式把事件處理器附加到動態生成的DOM裡去。

script應該要改成

<script>
    $("tbody").on("click", ".reflash", function myfunction() {
        alert("has been trigger");
    });

    $(".create").click(function myfunction() {
        var id = $("tr").length + 1;
        var name = $(this).siblings().get(0).value;

        var textTrTdStart = "<tr><td>";
        var textTdTrEnd = "</td></tr>";
        var textButton = " <button class='reflash'>更新</button>";
        var textId = "<input type='hidden' name='id' value='" + id + "' />";
        var textName = "<input type='text' name='name' value='" + name + "' />";
        $("#wapper>table>tbody").append(textTrTdStart + textId + textName + textButton + textTdTrEnd);
    });
</script>

注意，要先以靜態生成的<tbody>父節點為基底，然後於子元素集合裡再選擇reflash類別。

二、.bind()

<!DOCTYPE html>
<html>
<head>
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
    <script>
        $(document).ready(function () {
            $("p").bind("click", function () {
                alert("The paragraph was clicked.");
            });
        });
    </script>
</head>
<body>

    <p>Click me!</p>

</body>
</html>