カスタムjQueryプラグインで問題が発生する

Question

私はカスタムjQueryプラグインに苦労しています。その全体のポイントは次のとおりです。トリガーをクリックすると、ツールボックスが表示されます。その特定のツールボックスには、YoutubeまたはVimeoのURLを貼り付けて送信する1つの入力フィールドがあります。そのURLに基​​づいて、現在ページにある動画を変更しています。

トリガーをクリックすると、3つのツールボックス（ページに3つの動画があり、最初の動画をクリックした場合）、2つのツールボックス（3つの動画私は最後のもの（同じ条件）をクリックすると、私はあなたがこれがどこに行くか知っていると確信しています。

(function($) { 

$.fn.videowidget = function() { 
return this.each(function(){  
    // declare variables 
    var parent = $(this); 
    var thisPos = $(this).offset(); 

    var widgetHtml = jQuery('<div class="tool-video"><ul><li><a href="#tool-video1">Video</a></li></ul>' + 
        '<div id="tool-video1">' + 
          '<form id="tool-video-form" action="#" method="post">' + 
          '<label for="tool-video-url">Please enter the URL of your video (only Youtube or Vimeo accepted)</label>' + 
          '<input type="text" id="tool-video-url" name="tool-video-url" value="" class="marginFive">' + 
          '<a href="#submitVideo" class="videowidget-submit btn btn-success">Submit</a>' + 
          '<div class="tool-video-error"></div>' + 
         '</form>' + 
        '</div>' + 
        '<a href="#close" class="closeImageBox">Close</a>' + 
        '<a href="#drag" class="dragHandler" title="Drag me !!!">Draggable</a>' + 
        '</div>'); 

    // check if the containing div has the class 'w-video' 
    if($(this).hasClass('w-video')) { 
     $(this).append('<a href="#video" class="videoPlaceholder">Video placeholder</a>'); 
     $('.videoPlaceholder').bind('click', function() { 

     // insert the video widget and apply the required settings (positioning, drag, tabs) 
     widgetHtml.appendTo('body').css(thisPos).fadeIn().draggable({handle: 'a.dragHandler', cursor: 'move'}).tabs(); 
     $('.videowidget-submit').click(function(){ 
      // value of the submitted url 
      var url = $(this).prev('input').val(); 
      // regex to match provider 
      var provider = url.match(/(?:http:\/\/)?(:?www.)?(\w*)/)[2], id; 
      if(provider == "youtube") { 
       id = url.match(/(?:http:\/\/)?(?:www.)?(\w*).com\/.*v=(\w*)/)[2]; 
       // remove the curent iframe and replace it with the one bellow using the ID of the submitted URL 
       var youtubeTemplate = '<iframe width="460" height="259" src="http://www.youtube.com/embed/'+ id +'?wmode=opaque" frameborder="0" allowfullscreen></iframe>'; 
       parent.find('iframe').remove(); 
       parent.append(youtubeTemplate); 
       $('.tool-video-error, .tool-video').fadeOut(); 
       return false; 
      } else if (provider == "vimeo") { 
       id = url.match(/(?:http:\/\/)?(?:www.)?(\w*).com\/(\d*)/)[2]; 
       // remove the curent iframe and replace it with the one bellow using the ID of the submitted URL 
       var vimeoTemplate = '<iframe src="http://player.vimeo.com/video/'+ id +'?wmode=opaque" width="460" height="259" frameborder="0" webkitAllowFullScreen mozallowfullscreen allowFullScreen></iframe>'; 
       parent.find('iframe').remove(); 
       parent.append(vimeoTemplate); 
       $('.tool-video-error, .tool-video').fadeOut(); 
       return false; 
      } else if (provider == "youtu") { 
       id = url.match(/(?:http:\/\/)?(?:www.)?(\w*).be\/*(\w*)/)[2]; 
       // remove the curent iframe and replace it with the one bellow using the ID of the submitted URL 
       var youtubeTemplate = '<iframe width="460" height="259" src="http://www.youtube.com/embed/'+ id +'?wmode=opaque" frameborder="0" allowfullscreen></iframe>'; 
       parent.find('iframe').remove(); 
       parent.append(youtubeTemplate); 
       $('.tool-video-error, .tool-video').fadeOut(); 
       return false; 
      } else { 
       // throw error if the submitted URL doesn't match youtube or vimeo 
       $('.tool-video-error').html('Error: The URL you submitted doesn\'t appear to be valid ').fadeIn(); 
      } 
       return false; 
      }); 
      // close the toolbox 
      $('.closeImageBox').click(function(){ 
       $(this).parent().fadeOut(); 
       return false; 
      }); 
     return false; 
     }); 
    } else { 
      // do nothing 
    } 
}); 
}; 
})(jQuery); 

Answer 1

問題は、あなたがバインディングを行うには、クラスによって選択した場合、あなたのセレクタのコンテキストを提供しないことである。

は、ここでは、コードです。

$('.videowidget-submit').click(...) 

あなたのプラグインを適用するには、ページ内のいくつかの要素を持っているときに、それだけでなく、現在のインスタンスのクラス「videowidget提出」を持つすべての要素に結合します。

このようなフォローインセレクタにコンテキストを追加します（私はいくつかを忘れているかもしれません、コードをチェックしてください）。ポップアップ内の要素については

$(this).find('.videoPlaceholder').bind('click', ...) 

：ポップアップを開くため<a>リンクについては

widgetHtml.find('.videowidget-submit').click(...) 

widgetHtml.find('.tool-video-error, .tool-video').fadeOut() 

widgetHtml.find('.closeImageBox').click(...) 

DEMO

Answer 2

コードそれで非常に簡単に見てから、そのように見える

彼らはページ上の各インスタンスにイベントを登録しているので、

$('.videoPlaceholder') 

と

$('.videowidget-submit') 

は$（この）オブジェクトのコンテキストに限定されるものではありません。これが起こっている場所が他にもあるかどうかはわかりません。

私は自分のJQueryプラグインを作成するためにJqueryUIツールキットを使いました。これから始めるには良い場所は http://wiki.jqueryui.com/w/page/12138135/Widget-factory