-1

I used the following codes to create a "New button" next to the "button". But, when I click the "New button", it cannot create another "New button". Why? I have defined the "click" event of "button" tag

<head>
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.2jquery.min.js"></script>
    <script>
    $(document).ready(function() {
        $("button").click(function() {
            $("body").append("<button type=button>New button</button>");
        })
    })
    </script>
</head>

<body>
    <button type="button">button</button>
</body>
Tushar
  • 85,780
  • 21
  • 159
  • 179
Brian Leung
  • 33
  • 6

2 Answers2

1

Use event delegation for binding events automatically on dynamically added elements.

$(document).ready(function() {
    var button = "<button type=button>New button</button>";

    $(document).on('click', "button", function() {
        $("body").append(button);
    });
});
Tushar
  • 85,780
  • 21
  • 159
  • 179
0
 $(document).on('click', "button", function() {
        $("body").append("<button type=button>New button</button>");
    })
ozil
  • 6,930
  • 9
  • 33
  • 56