Question

启动应用程序后，我将formularzZgloszeniowy的内容加载到空div（#zawartoscTabeli）。点击li元素后，我将div从#ogloszenia加载到div（#zawartoscTabeli）。从这一刻起，我无法从按钮#kik中捕获事件。

有人知道如何解决这个问题吗？

<!doctype html>
<html>

<head>
    <script src="http://code.jquery.com/jquery-1.11.0.min.js"></script>
    <script src="http://code.jquery.com/jquery-migrate-1.2.1.min.js"></script>
    <meta charset="utf-8">
    <title>Dokument bez tytułu</title>
    <script>
    $(document).ready(function() {
        $('#zawartoscTabeli').stop().css('opacity', '0').html($('#formularzZgloszeniowy').html()).animate({
            opacity: 1
        }, 500);

        $("section ul").on('click', 'li', function() {
            var id = this.id;
            $('#zawartoscTabeli').stop().css('opacity', '0').html($('#ogloszenia div:nth-child(' + id + ')').html()).animate({
                opacity: 1
            }, 500);
        });

        $('#kik').click(function() {
            alert('dddd');
        });
    });
    </script>
</head>

<body>
    <div id="wrapper">
        <section>
            <ul>
                <li id="1" style="font-size: 12px;">CLICK</li>
            </ul>
            <div id="zawartoscTabeli">
            </div>
        </section>
        <!--formularz zgloszeniowy-->
        <div id="formularzZgloszeniowy" style="display: none">
            <form id="form1" action="rejestracjaUzytkownika.jsp" method="POST">
                <div class="formualrz">
                    <div class="width20">Preferowane miejsce pracy<sup>*</sup>:</div>
                    <div class="width20">
                        <input type="text" name="miejsce_pracy" />
                    </div>
                </div>
                <div class="formualrz">
                    <div class="left">Imię i nazwisko<sup>*</sup>:</div>
                    <div class="right">
                        <input type="text" name="imie_nazwisko" />
                    </div>
                </div>
                <BR/>
                <BR/>
            </form>
        </div>
        <!--formularz zgloszeniowy-->
        <div id="ogloszenia" style="display: none">
            <div>
                <p class="bold">Opis stanowiska:</p>
                <ul>
                    <li>123</li>
                    <li>1234</li>
                    <li>326236</li>
                </ul>
                <button id="kik">BACK</button>
            </div>
        </div>
    </div>
</body>

</html>

Link to demo

Answer 1

在您更新html元素时，events已取消绑定。使用event delegation：

事件委托允许我们将单个事件侦听器附加到父元素，该元素将为匹配选择器的所有后代触发，无论这些后代现在是存在还是将来添加。

$('#zawartoscTabeli').on('click', '#kik', function () {
    alert('Łot de fack');
});

演示：http://jsfiddle.net/tusharj/95v7fbbe/1/

文档：http://learn.jquery.com/events/event-delegation/

使用jquery的按钮的奇怪行为

1 个答案: