1

ノードバックボーン アプリケーションを使用しています。動的コンテンツを作成し、作成したコンテンツまたは要素にドラッグ可能な jquery UI を追加します。ただし、テンプレート システムがレンダリングされるとき、要素は移動さえしません。パスは正しいです。クラスを使用して、これらの要素とドラッグ可能なメソッドへの参照を作成します。

jquery ui および jquery スクリプトを含めて正しくロードする正しい方法を誰か教えてもらえますか?

レイアウト jade - index.jade - index.jade でレンダリングされるテンプレート (拡張レイアウト)

私のアプリには、バックボーンに接続されている jquery モジュールがありますが、何らかの理由で jquery UI が接続されていないため、その隣に jquery スクリプトを追加する必要があります。しかし、テンプレートにバックボーンを持つ動的要素を作成すると、jquery は機能しません。.html() を使用してそれらをテンプレートに追加します。

これはlayout.jadeです

!!! 5
html(lang="en")
  head
    title project
    meta(name='viewport', content='width=device-width, initial-scale=1.0')
    link(rel='stylesheet',href='/styles/bootstrap.css')
    link(rel='stylesheet',href='/styles/styles.css')

  body
   .navbar.navbar-inverse
    .container
        button.navbar-toggle(type='button', data-toggle='collapse', data-target='.nav-collapse')
          span.icon-bar
          span.icon-bar
          span.icon-bar
        a.navbar-brand(href='#') 
         img(src='/img/greatlogowhite.png', width='300')
        .nav-collapse.collapse
          ul.nav.navbar-nav
            li.active
             a(href='#') 
              img(src='/img/house.svg', width='70')
            li
             a(href='#about')
              img(src='/img/pen.svg', width='70')
            li
             a(href='#contact')
              img(src='/img/search.svg', width='70')
            li
             a(href='#contact')
              img(src='/img/chat.svg', width='70')

こちらはindex.jade

  block content
  block scripts


extends layout

block content
  div#content

block scripts
  script(data-main='js/boot', type='text/javascript',src='/js/libs/require.js')
  script(type='text/javascript', src='http://code.jquery.com/ui/1.10.3/jquery-ui.js')

これは私がjquery uiを使用しようとする方法です

<script> 
    $(document).ready(function() {
           $( ".pic" ).draggable();
    });
</script>
4

1 に答える 1