Question

在Rails教程中学习，作为在线课程的一部分。他们建议使用this gem来实现实时降价编辑器。我无法让宝石工作，所以我开始检查它。存储库已有两年了，所以我并不惊讶宝石不能正常工作。我按照安装说明和相应的文件加载，我只是不明白为什么它不起作用。

如果做工作会非常方便，因为安装非常简单。它的设置方式，安装gem后运行rake任务并将uses_markdown_preview添加到相应的控制器所需要做的就是在要预览的textarea中添加一个“markdown_preview”类。

应该发生的是，一旦你将“markdown_preview”类添加到文本区域，jQuery文件就会在该类上执行函数markdownPreview，这会创建一种控制栏有三个按钮。编辑按钮，默认情况下处于打开状态，因此您可以编辑textarea。一个预览按钮，一旦你单击它应该采取输入文本并呈现文本的预览，在文本上应用降价。一个帮助按钮，一旦你点击，将显示如何使用降价的说明。

我注意到的第一件事是jQuery使用了过时的选择器，即.live()。当我将它们更改为.on()时，jQuery文件加载了我上面描述的按钮，但仍然没有任何事件有效。我将在下面发布文件：

(function( $ ){

  $.fn.markdownPreview = function( type ) {  

    return this.each(function() {

      var $this = $(this);

      $this.wrap( '<div class="markdown_wrap editing"></div>' );

      $this.before( '<div class="markdown_wrap_menu"><div class="markdown_wrap_menu_help">Help</div><div class="markdown_wrap_menu_edit">Write</div><div class="markdown_wrap_menu_preview">Preview</div></div>' );

var help_text = [
   '<div class="content cheatsheet">',
   '<h2>Markdown Cheat Sheet</h2>',
   '<div class="cheatsheet-content">',
   '<div class="mod">',
   '<div class="col">',
   '<h3>Format Text</h3>',
   '<p>Headers</p>',
   '<pre># This is an &lt;h1&gt; tag',
   '## This is an &lt;h2&gt; tag',
   '###### This is an &lt;h6&gt; tag</pre>',
   '    <p>Text styles</p>',
   '    <pre>*This text will be italic*',
   '_This will also be italic_',
   '**This text will be bold**',
   '__This will also be bold__',
   '',
   '*You **can** combine them*',
   '</pre>',
   '</div>',
   '<div class="col">',
   '<h3>Lists</h3>',
   '<p>Unordered</p>',
   '<pre>* Item 1',
   '* Item 2',
   '  * Item 2a',
   '  * Item 2b</pre>',
   '     <p>Ordered</p>',
   '     <pre>1. Item 1',
   '2. Item 2',
   '3. Item 3',
   '   * Item 3a',
   '   * Item 3b</pre>',
   '</div>',
   '<div class="col">',
   '<h3>Miscellaneous</h3>',
   '<p>Images</p>',
   '<pre>![GitHub Logo](/images/logo.png)',
   'Format: ![Alt Text](url)',
   '</pre>',
   '<p>Links</p>',
   '<pre>http://github.com - automatic!',
   '[GitHub](http://github.com)</pre>',
   '<p>Blockquotes</p>',
   '<pre>As Kanye West said:',
   '&gt; We\'re living the future so',
   '&gt; the present is our past.',
   '</pre>',
   '</div>',
   '</div>',
   '<div class="rule"></div>',
   '</div>',
   '</div>' ].join( "\n" );


$this.before( '<div class="markdown_wrap_help">' + help_text + '</div>' );

  $this.wrap( '<div class="markdown_wrap_content"></div>' );
  $this.after( '<div class="markdown_wrap_preview"></div>' );

  $this.wrap( '<div class="markdown_wrap_editor"></div>' );

  /*
  if ( !type || type == 'width' ) {
    $this.width( $this.width() );
    }

  if ( !type || type == 'height' ) {
        $this.height( $this.height() );
    }*/

  });

  };

  $( '.markdown_wrap_menu_help' ).live( 'click', function(){
  //console.log( 'Clicked Help' );
    $( this ).closest( '.markdown_wrap' ).toggleClass( 'helping' );

    $( this ).closest( '.markdown_wrap' ).find( '.markdown_wrap_help' ).slideToggle( 'fast' );
  });

  $( '.markdown_wrap_menu_edit' ).live( 'click', function(){
    //console.log( 'Clicked Edit' );
    $( this ).closest( '.markdown_wrap' ).removeClass( 'previewing' ).addClass( 'editing' );

    $( this ).closest( '.markdown_wrap' ).find( '.markdown_wrap_preview' ).hide();
    $( this ).closest( '.markdown_wrap' ).find( '.markdown_wrap_editor' ).show();
  });

  $( '.markdown_wrap_menu_preview' ).live( 'click', function(){
    //console.log( 'Clicked Preview' );
    $( this ).closest( '.markdown_wrap' ).removeClass( 'editing' ).addClass( 'previewing' );

    var editor  = $( this ).closest( '.markdown_wrap' ).find( '.markdown_wrap_editor' );
    var preview = $( this ).closest( '.markdown_wrap' ).find( '.markdown_wrap_preview' );

    preview.html( 'Loading...' );

    editor.hide();
    preview.show();

    var editor_content = editor.find( 'textarea' ).val();

    $.ajax({
      type: 'POST',
      url: '/markdown_preview/convert',
      data: { 'format' : 'json', 'markdown_text' : editor_content },
      success: function( data, textStatus, jqXHR ){
        preview.html( data['html'] );
      },
      error: function(jqXHR, textStatus, errorThrown){
        //console.log( "ERROR" );
        //console.log( jqXHR );
        //console.log( textStatus );
        //console.log( errorThrown );
      },
      dataType: 'text json' 
    });

  });
})( jQuery );


$( document ).ready( function(){
  $( '.markdown_preview' ).markdownPreview();
});

除.live()选择器外，此文件还有什么问题？为什么看起来这些代码在它们发生这些事件之前是有效的，即：

$( '.markdown_wrap_menu_help' ).live( 'click', function(){
  //console.log( 'Clicked Help' );
    $( this ).closest( '.markdown_wrap' ).toggleClass( 'helping' );

    $( this ).closest( '.markdown_wrap' ).find( '.markdown_wrap_help' ).slideToggle( 'fast' );
  });

我可以在第一个事件之上添加代码，比如alert()函数，我已经确认会执行，但是当我点击任何按钮时，没有任何反应。

Answer 1

想出来。这样：

$( '.markdown_wrap_menu_help' ).live( 'click', function(){
//console.log( 'Clicked Help' );
  $( this ).closest( '.markdown_wrap' ).toggleClass( 'helping' );

  $( this ).closest( '.markdown_wrap' ).find( '.markdown_wrap_help' ).slideToggle( 'fast' );
});

应该是：

$( document ).on('click', '.markdown_wrap_menu_help', function(){
  $( this ).closest( '.markdown_wrap' ).toggleClass( 'helping' );

  $( this ).closest( '.markdown_wrap' ).find( '.markdown_wrap_help' ).slideToggle( 'fast' );
});

我一直专注于Rails和我的jQuery缺乏。如果有人能够解释为什么旧代码在之前的jQuery库中工作以及为什么这个更改适用于当前版本，那将会很有帮助。

降价预览宝石中的jQuery有什么问题？

1 个答案: