添加的html不会执行Javascript

时间:2015-11-01 18:24:10

标签: javascript jquery html

对于我正在处理的项目,我正在将记录添加到列表中。但添加内容中的按钮不会执行它应该执行的javascript。

我已经用它做了一个涂鸦 - 尽可能简单 - 去演示。

按钮“点击一些内容”会像我期望的那样触发警报。按钮'其他一些要点击的内容'不会。

我怀疑这与html没有加载有关...但我对如何解决这个问题一无所知。

无论如何......如果你们愿意帮忙......这就是代码:

<!DOCTYPE html>
<html>
<head>
    <meta http-equiv="content-type" content="text/html; charset=UTF-8">
    <title>scribble</title>
    <script type='text/javascript' src='//code.jquery.com/jquery-1.8.3.js'></script>

    <script type='text/javascript'>
        //<![CDATA[
        $(function () {

            $('.clickme')
              .click(function () {
                  list = $(this).parents('.container').find('.list');
                  list.prepend('<div class="record"><button class="record_button">some other content to click</button></div>')
                  alert('added a record');
              });

            $('.record_button')
              .click(function () {
                  alert('content clicked');
              });


        });//]]>

    </script>

</head>
<body>
    <div class='container'>
        <button class='clickme'>add record</button>
        <div class='list'>
            <div class='record'>
                <button class='record_button'>some content to click</button>
            </div>
        </div>
    </div>
</body>

</html>

1 个答案:

答案 0 :(得分:1)

尝试

$('.clickme').on('click',function()..

除非您这样称呼,否则侦听器不适用于添加的元素。

jQuery .on()