javascript - 使用 jquery 的按钮的奇怪行为

标签 javascript jquery html event-handling

启动应用程序后,我将 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

最佳答案

当您更新元素的 html 时,事件 被解除绑定(bind)。使用事件委托(delegate):

Event delegation allows us to attach a single event listener, to a parent element, that will fire for all descendants matching a selector, whether those descendants exist now or are added in the future.

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

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

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

关于javascript - 使用 jquery 的按钮的奇怪行为,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/30867460/

相关文章:

javascript - 有没有办法在不使用 React 或 Vue 的情况下使用裁剪框在 JavaScript 中裁剪视频?

javascript - Vue.js 组件 img src 来自 prop?

javascript - 使用 javascript 设置属性

jquery - 即使确认失败,ASP.NET MVC Ajax Post 也会执行 OnComplete

php - 如何将 <div> 处理为表单 &lt;input&gt;

javascript - 如何使用 TreeListFilter 列出与输入搜索文本关联的子元素?

javascript - 使用循环返回子集

javascript - Canvas Javascript 绘图功能不起作用

javascript - iframe 中的 jQuery 滚动事件

html - 如何排列 CSS 元素?有我可以使用的工具吗?