selector after an innerhtml

selector after an innerhtml

Hi All,

I'm sure this is a simple one but it's doing my head in! Simply put, I need a jquery selector to work on content that has been added via innerhtml or append from an ajax query.

A cut down version is below.

Click to add the imported data and then hopefully the selector for the imported data should also work but it doesn't.

I'm assuming it's something along the lines of the content not being in the original dom so jquery isn't aware of it.

Any help gratefully accepted!

<html>
<script type="text/javascript" src="/include/jquery-latest.js"></script>
<script type="text/javascript">
        $("#mytest2").click(function () {
                alert('success');
        })
$(document).ready(function(){
        $("#mytest").click(function () {
                $(".mydiv").append('<p id="mytest2">New paragraph</p>')
        })
});
</script>
<body>
<a id="mytest">click here</a>
<div class="mydiv">data added here</div>
</body>
</html>