js如何动态添加元素绑定事件

<button id="myButton">Click me</button>

<script>
document.getElementById('myButton').addEventListener('click', function() {
    alert('Button was clicked!');
});
</script>

<div id="container">
    <!-- 动态添加的元素将在这里 -->
</div>

<script>
document.getElementById('container').addEventListener('click', function(event) {
    if (event.target && event.target.nodeName == 'BUTTON') {
        alert('Button was clicked!');
    }
});

// 动态添加元素
var newButton = document.createElement('button');
newButton.textContent = 'New Button';
document.getElementById('container').appendChild(newButton);
</script>

<div id="container">
    <!-- 动态添加的元素将在这里 -->
</div>

<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script>
$(document).ready(function() {
    $('#container').on('click', 'button', function() {
        alert('Button was clicked!');
    });

    // 动态添加元素
    $('#container').append('<button>New Button</button>');
});
</script>

<div id="container">
    <!-- 动态添加的元素将在这里 -->
</div>

<script>
function handleClick() {
    alert('Button was clicked!');
}

// 动态添加元素并绑定事件
var newButton = document.createElement('button');
newButton.textContent = 'New Button';
newButton.addEventListener('click', handleClick);
document.getElementById('container').appendChild(newButton);
</script>