jQuery动态添加元素后元素注册事件失效解决

当我们使用jQuery动态添加元素时，常常会遇到一些元素事件注册失效的问题。这是因为动态添加的元素在页面载入时并不存在于DOM中，所以我们需要找到一个有效的方法来注册事件。

下面是几种针对此类问题的解决办法。

方案一：事件委托

事件委托是指把事件绑定到父级元素上，让父级元素监听所有子元素的事件。由于父级元素存在于DOM中，所以动态添加的元素也可以被监听到。

例如，如果我们动态添加了一个按钮，我们可以将其父级元素赋予一个事件，以便监听按钮的事件。

// 给父元素绑定事件，监听子元素的点击事件
$("#parent").on("click", "button", function(){
    // ...
});

在上面的代码中，我们使用父级元素 #parent 来监听其内部动态添加的 button 元素的点击事件。这样，无论何时动态添加的按钮都可以被正常监听到。

方案二：重新注册事件

使用jQuery添加或删除元素时，常规的事件绑定使用 $(document).on('click', '#test', function(){}) 等方式是无效的。解决这个问题，可以使用 .delegate() 或 .live() 等方法。但是在jQuery 1.7版本之后推出了 .on() 方法，可以替换之前的方法。

我们可以将原来的事件监听使用一个函数进行封装，当添加元素时，重新调用该函数进行事件注册。

例如，在以下代码中，当我们添加一个分页元素时，会重新调用 bindPageEvents() 函数进行事件注册。

function bindPageEvents() {
    // 分页元素事件绑定
    $(".pagination a").on("click", function(){
        // ...
    });
}

// 添加分页元素
function addPagination() {
    var html = '<div class="pagination"><a href="#" class="page-link">1</a><a href="#" class="page-link">2</a><a href="#" class="page-link">3</a></div>';
    $("#container").append(html);

    // 注册事件
    bindPageEvents();
}

在上面的代码中，我们将分页元素的事件注册封装在一个函数 bindPageEvents() 中，并在添加分页元素时调用该函数重新进行事件注册。

示例一：使用事件委托

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>事件委托示例</title>
    <script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.min.js"></script>
    <script>
        $(function(){
            $("#btn_add").click(function(){
                var html = '<button class="test">点击我</button>';
                $("#container").append(html);
            });

            $("#container").on("click", ".test", function(){
                alert("点击了动态添加的按钮");
            });
        });
    </script>
</head>
<body>
    <div id="container">
        <button class="test">点击我</button>
    </div>
    <button id="btn_add">动态添加按钮</button>
</body>
</html>

在上面的代码中，我们给 #container 元素绑定了一个委托事件监听它内部动态添加的 .test 元素的点击事件。当我们添加一个 .test 元素时，它会正常触发该事件。

示例二：重新注册事件

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>重新注册事件示例</title>
    <script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.min.js"></script>
    <script>
        function bindBtnEvents() {
            $(".test").on("click", function(){
                alert("点击了动态添加的按钮");
            });
        }

        $(function(){
            // 第一次注册按钮事件
            bindBtnEvents();

            // 动态添加按钮
            $("#btn_add").click(function(){
                var html = '<button class="test">点击我</button>';
                $("#container").append(html);

                // 重新注册按钮事件
                bindBtnEvents();
            });
        });
    </script>
</head>
<body>
    <div id="container">
        <button class="test">点击我</button>
    </div>
    <button id="btn_add">动态添加按钮</button>
</body>
</html>

在上面的代码中，当我们动态添加 .test 元素时，会调用 bindBtnEvents() 函数来注册事件。由于该函数只在第一次注册时被调用，所以我们每次添加元素时都需要重新调用该函数进行事件注册。

本站文章如无特殊说明，均为本站原创，如若转载，请注明出处：jQuery动态添加元素后元素注册事件失效解决 - Python技术站

jQuery动态添加元素后元素注册事件失效解决

方案一：事件委托

方案二：重新注册事件

示例一：使用事件委托

示例二：重新注册事件

相关文章