Question

我正在使用jQuery编写自己的markdown脚本：

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);

});

这是一个有效的fiddle。

问题是我想让这段代码在通过ajax显示的页面上生效。因此，用户点击链接：

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

以下是该链接的jQuery代码：

$(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');
    });
});

如何在用户点击链接时显示的页面上使用我的jQuery markdown代码？

Answer 1

不确定我是否理解了所有内容，但是当新数据添加到框中时，您可以尝试这样的事情。

编辑：在这里，我把所有可能的方式都考虑在内......

在DOMSubTreeModified事件中：某些浏览器不会喜欢这个。因为它被标记为已弃用。

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

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

  });
});

另一种方法是，在锚点上添加另一个点击处理程序，使用setTimeout~500 ms。然后执行降价。

$(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);
});

ajax done（）处理程序中的第3种方式：

$(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');
});
});

另一种方法是在ajax完成回调处理程序，在kwqe_revisions_box上触发更改。（如果可以的话），加载内容时。

$（ “＃kwqe_revisions_box”）改变（）;

然后写一个更改处理程序

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

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

          });
});

在通过ajax加载的页面上运行jQuery代码

1 个答案: