は、私は本当にこの質問を表現する方法がわからない

Question

別の関数から呼び出されたjQueryの機能を実行します。しかし、私が達成しようとしているのは、別のJavaScript（非jQuery）関数からjQuery関数を実行/呼び出すことです。

私はこれは行われることになっている方法ですJQ carousel.

に要素を追加しようとしています：ボタンをクリックして。 ：

$('#carousel_add').on('click', function(ev) { 
    $carousel.carousel('reset'); 
    $carousel.append('<div class="carousel_box"> Page '+(z)+' <br/><img src="http://place.to/my/picture/file'+dir+'/0'+z+'.png" width="100px" height="50px"> </div>'); 
    $carousel.carousel('refresh'); 
    document.getElementById('carousel_next').disabled = false; 
    document.getElementById('carousel_prev').disabled = true; 
}); 

私は追加ボタンなしでそれをしようとしています。私は、JavaScript関数をトリガーするボタンが、カルーセル用の関数を追加するjQueryをトリガーすることを望んでいます。私が午前問題は、関数のスコープ内ではありませんので、私は理解することができた、カルーセル変数が定義されていないと言うことです。

例：

HTML - >

<input type="button" value="Load Pages" function="loadPages();"> 

のJavaScript（何jQueryのは関与していない）

<script type="text/javascript"> 
function loadPages() 
{ 
myImage = new Image(); 
myImage.src = "http://path.to/image/file.png"; 
//The image is loaded. 
//Now I want to add this image to the JQ Carousel 
addCarousel(myImage.src); 
} 
</script> 

のJavaScript（jQueryのベースのカルーセル - > JQカルーセル）

<script type="text/javascript"> 

$(document).ready(function(e) { 

    var $carousel = $('#carousel').carousel({ 
     group: 6, 
     indicator: false 
     }), 
     $prev = $('#carousel_prev'), 
     $next = $('#carousel_next'), 
     set_state = function() { 
     var state = $carousel.carousel('getMoveState'); 
     switch (state) { 
     case 'min': 
      $prev.prop('disabled', 'disabled'); 
      $next.prop('disabled', ''); 
      break; 
     case 'max': 
      $prev.prop('disabled', ''); 
      $next.prop('disabled', 'disabled'); 
      break; 
     case true: 
      $prev.prop('disabled', ''); 
      $next.prop('disabled', ''); 
      break; 
     default: 
      $prev.prop('disabled', 'disabled'); 
      $next.prop('disabled', 'disabled'); 
     } 
     }; 
     num = 1; 

    $('#carousel_prev').on('click', function(ev) { 
     $carousel.carousel('prev'); 
    }); 
    $('#carousel_next').on('click', function(ev) { 
     $carousel.carousel('next'); 
    }); 
    // ... 
    $carousel.bind({ 
     'Carousel.next': function() { 
     set_state(); 
     }, 
     'Carousel.prev': function() { 
     set_state(); 
     } 
    }); 

</script> 

今カルーセルが常駐HTML

function addCarousel(image) 
{ 
     $carousel.carousel('reset'); 
     $carousel.append('<div class="carousel_box"> Page '+(num++)+' <br/><img src="'+image+'" width="100px"> </div>'); 
     $carousel.carousel('refresh'); 
     document.getElementById('carousel_next').disabled = false; 
     document.getElementById('carousel_prev').disabled = true; 
    }) 


} 

それを追加することになっている機能：それは以前のページで宣言されたものの

<div class="carousel"> 
    <div id="carousel" class="carousel_inner"> 

    <div class="carousel_box"> Page 1 <br/><img src="http://path/to/image/file.png" width="100px"></div> 
    </div> 

    </div> 
    <p class="btns"> 
    <input type="button" id="carousel_prev" value="prev" disabled> 
    <input type="button" id="carousel_next" value="next" > 
    <input type="button" id="carousel_add" value="add"> 
    </p> 
</div> 

私は$カルーセルを取得していますが、定義されていません。私は間違っているの？

Answer 1

ただdocument.ready機能の$carousel外に置きます。以前

このような

..

<script type="text/javascript"> 
var $carousel = null; 
$(document).ready(function(e) { 

    $carousel = $('#carousel').carousel({//notice i removed "var " 
     group: 6, 
     indicator: false 
    }), 
.... 

、変数$carouselはdocument.readyイベントの匿名ハンドラ内だけ見えました。それを外に出すと、その変数にグローバルな可視性が与えられます。スクリプト内のどこからでもその変数を使用できるようになりました。

また、あることを意識し$carouselを更新します。同じ値が他のすべての場所に反映されますので、あなたは$carouselを参照しています。

Answer 2

$carouselがdocument.readyスコープのうち表示されていない、あなたのdocument.readyのうち、$carouselを宣言。

var $carousel; 
$(document).ready(function() { 
    $carousel = $('#carousel').carousel({...