Question

我正在构建一个Web应用程序。这个Web应用程序的主导航使用jquery刷新，但刷新后jquery事件不起作用。

“on按钮”有一个与 .on 绑定的jquery事件，每次点击它都会附加一个段落。 “重置按钮”添加了另一个“按钮”，但jquery事件不适用于它。

我已经使用 .on 方法来规避文档准备就绪时第二个“on button”不在DOM中。

这是一个简单的例子：

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>blub</title>

<script src="js/jquery.js" type="text/javascript"></script>
<script type="text/javascript">
    $(document).ready(function() {

        $(".reset").click(function() {
            $("nav").append('<button class="on">test</button>');
        })

        var count = 0;
        $(".on").on("click", function(){
            $(".cont").append("<p>Another paragraph! "+(++count)+"</p>");
        });

    });
</script>
</head>

<body>
    <button class="reset">reset</button>
    <nav>
        <button class="on">test</button>
    </nav>
    <div class="cont"></div>
<script>

</script>
</body>
</html>

Answer 1

问题很严重你使用方法“on”试试这个：

<script type="text/javascript">
    $(document).ready(function() {

        $(".reset").click(function() {
            $("nav").append('<button class="on">test</button>');
        })

        var count = 0;
        $(document).on("click",".on", function(){
            $(".cont").append("<p>Another paragraph! "+(++count)+"</p>");
        });

    });
</script>

DEMO

Answer 2

.on不是.live的直接替代品，其语法略有不同。如果您希望它稍后影响添加到DOM的元素，您需要像这样使用它：

$(document).on('click', '.on', function(){
});

Answer 3

您也可以通过这种方式执行此操作 - 这样点击处理程序会在创建时分配给每个按钮。

$(document).ready(function() {

    var count = 0;

    $(".reset").click(function() {
        $("nav").append($('<button>', {
            class: 'on',
            html: 'test',
            click: function() {
                $('.cont').append('<p>Another paragraph! ' + (++count) + '</p>');
            }
        }));
    });
});

jquery.on（“点击”）没有像我预期的那样工作

3 个答案: