Run jQuery code on page loaded via ajax

Question

I'm writing my own markdown script using jQuery:

function markdown(markdownable) {

var bold = /\*\*(\S(.*?\S)?)\*\*/gm;
    markdownable = markdownable.replace( bold, '<span style="font-weight:bold">$1</span>' );

    return markdownable;
}

$('.content').each(function() {

    var markdownable = $(this).html(),
        content = markdown(markdownable);

    $(this).html(content);

});

Here is a working fiddle.

The problem is that I want this code to come in effect on a page that is displayed via ajax. So users clicks on a link:

<a id="kwqe_show_vote_link" href="#">Show Box</a>

And here is the jQuery code for that link:

$(document).on('click', 'a#kwqe_show_vote_link', function(e) {
    e.preventDefault();
    e.stopImmediatePropagation();
    var $button = $(this);
    if ($button.data('disabled'))
        return false;
    if (kwqommunityEditorBoxCache.votes) {
        $('#kwqe_revisions_box').replaceWith(kwqommunityEditorBoxCache.votes);
        return false;
    }
    $button.data('disabled', 1);
    var post = $button.data('post');
    var $now = $('#kwqe_revisions_box').html();
    $('#kwqe_revisions_box').empty().append('<p>' + kwqommunityEditorBoxData.loading
            + '</p>');
    $.ajax({
        data: {action: 'print_box', kwqe_post: post}
    }).done(function(data) {
        if (data && $('#kwqe_revisions_box').length) {
            $('#kwqe_revisions_box').replaceWith(data);
            kwqommunityEditorBoxCache.votes = data;
        } else {
            $('#kwqe_revisions_box').html($now);
            kwqommunityEditorBox.errorMsg('no_ajax_msg', '#kwqe_vote_box_feedback');
        }
        $(document).trigger('kwqe_print_box');
    }).fail(function() {
        $('#kwqe_revisions_box').html($now);
        kwqommunityEditorBox.errorMsg('no_ajax_msg', '#kwqe_vote_box_feedback');
    });
});

How do I make so that my jQuery markdown code works on the page that is displayed when the user has clicked the link?

Answer 1

Not sure if I understood everything correctly yet you can try something like this, when new data is added to box.

Edit: Here I put all the possible ways I can think of....

1. In DOMSubTreeModified event: This will not be liked by some browsers. As it's marked deprecated.

   $("#kwqe_revisions_box").on("DOMSubtreeModified", function() {
   $('#kwqe_revisions_box').find('.content').each(function() {
   
     var markdownable = $(this).html(),
     content = markdown(markdownable);
     $(this).html(content);
   
     });
   });
   

2. Another way, add another click handler on anchor, use setTimeout ~500 ms. then execute the markdown.

   $(document).on('click', 'a#kwqe_show_vote_link', function(e) {
   ...do you ajax stuff here, as it is now
   
   }).on('click',function(){
   setTimeout(function(){
     $('#kwqe_revisions_box').find('.content').each(function() {
   
     var markdownable = $(this).html(),
     content = markdown(markdownable);
     $(this).html(content);
   
     });
   });
   
   },500);
   });
   

3. 3rd way in ajax done() handler:

   $(document).on('click', 'a#kwqe_show_vote_link', function (e) {
   e.preventDefault();
   e.stopImmediatePropagation();
   var $button = $(this);
   if ($button.data('disabled'))
       return false;
   if (kwqommunityEditorBoxCache.votes) {
       $('#kwqe_revisions_box').replaceWith(kwqommunityEditorBoxCache.votes);
       $('#kwqe_revisions_box').find('.content').each(function () {
   
           var markdownable = $(this).html(),
           content = markdown(markdownable);
           $(this).html(content);
   
       });
       return false;
   }
   $button.data('disabled', 1);
   var post = $button.data('post');
   var $now = $('#kwqe_revisions_box').html();
   $('#kwqe_revisions_box').empty().append('<p>' + kwqommunityEditorBoxData.loading
       + '</p>');
   $.ajax({
       data: { action: 'print_box', kwqe_post: post }
   }).done(function (data) {
       if (data && $('#kwqe_revisions_box').length) {
           $('#kwqe_revisions_box').replaceWith(data);
           kwqommunityEditorBoxCache.votes = data;
           $('#kwqe_revisions_box').find('.content').each(function () {
   
               var markdownable = $(this).html(),
               content = markdown(markdownable);
               $(this).html(content);
   
           });
       } else {
           $('#kwqe_revisions_box').html($now);
           kwqommunityEditorBox.errorMsg('no_ajax_msg', '#kwqe_vote_box_feedback');
       }
       $(document).trigger('kwqe_print_box');
   }).fail(function () {
       $('#kwqe_revisions_box').html($now);
       kwqommunityEditorBox.errorMsg('no_ajax_msg', '#kwqe_vote_box_feedback');
   });
   });
   

4. Another way is in ajax done callback handler, trigger change on kwqe_revisions_box.(if you can), when content is loaded.

$("#kwqe_revisions_box").change();

then write a change handler

$("#kwqe_revisions_box").on('change',function(){
$('#kwqe_revisions_box').find('.content').each(function() {

          var markdownable = $(this).html(),
          content = markdown(markdownable);
          $(this).html(content);

          });
});