0

For a project I'm working on I'm adding records to a list. But a button in the added content does not execute the javascript it is supposed to execute.

I've made a scribble out of it - as simple as I could make it - to demonstrate.

The button "some content to click" fires of an alert like I expect. The button 'some other content to click' does not.

I suspect this has to do with the html not being there on load... but I'm clueless on how to solve this.

Anyway... if you guys are willing to help... here is the code:

<!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>
Fayyaz Naqvi
  • 695
  • 7
  • 19
Peter
  • 23
  • 6
  • found this http://stackoverflow.com/questions/14269587/how-to-execute-script-code-in-a-javascript-append but I can't figure out how to use this – Peter Nov 01 '15 at 18:54

1 Answers1

1

Try 

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

Listeners don't work for added elements unless you call them like so.

jQuery .on()

George Irimiciuc
  • 4,573
  • 8
  • 44
  • 88