How to alter dynamically generated nodes?

Question

I've been searching for quite a while now to try and find a way to change (remove links, highlight, w/e) html content that had just been added dynamically.

First, I download an cross domain website using getJSON:

$.getJSON('http://whateverorigin.org/get?url=' + encodeURIComponent('http://my.other.site/') + '&callback=?', function (data) {
    $('#main').html(data.contents);
});

Then, I try to access the content using jQuery:

$('a').unwrap;

Now I think I understand nodes that are dynamically generated need to be accessed through the jQuery .on method but events like ready or change are not fired neither on the document nor my #main.

Other events, like mouseMove or click actually work:

$(document).on('click', 'a', function () {
    $(this).unwrap();
});
$(document).on('click', '#primaryMenu', function () {
    alert('yeee');
});

But I can't see a way (or a place) to put for example:

$('h3').wrap('<i></i>');

As you can see I use WhateverDomain.com to allow for cross domain GET request.

I am also open to other suggestions to be able to copy a site and modify it at will.

Here is the fiddle I've been using: Fiddle link

Answer 1

You can load the data into a jquery object before adding it to the DOM, and make any adjustments there.

Like so: http://jsfiddle.net/uGgk4/1/

$(document).ready(function(){
    $(document).on('click', 'a', function () {
        $(this).unwrap();
    });
    $(document).on('click', '#primaryMenu', function () {
        alert('yeee');
    });
    var jqxhr = $.getJSON('http://whateverorigin.org/get?url=' + encodeURIComponent('http://www.wiiu-info.fr/') + '&callback=?', function (data) {
        var loadedData = $(data.contents);                
        loadedData.find("a").unwrap();
        $('#main').empty();
        $('#main').append(loadedData);        
    });
});

First I wrap the data contents in jquery, and I access the elements before appending it to the DOM.

Answer 2

Add 'preventDefault()':

$(document).on('click', 'a', function (e) {
    e.preventDefault();
    $(this).unwrap();
});