0

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

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

我已经使用.on方法来规避当文档准备好时第二个“打开按钮”不在 DOM 中。

这是一个简单的例子：

jsFiddle 上的示例

<!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>
4

3 回答 3

2

问题很热你使用方法“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>

演示

于 2013-03-12T20:34:44.073 回答
2

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

$(document).on('click', '.on', function(){
});
于 2013-03-12T20:35:50.100 回答
0

您也可以通过这种方式非常简单地执行此操作 - 这样，单击处理程序在创建时被分配给每个按钮。

$(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>');
            }
        }));
    });
});
于 2013-03-12T20:48:23.283 回答