问题与自定义jQuery插件

Question

我一直在努力与自定义jQuery插件。它的全部内容如下：点击触发器，出现一个工具箱。在该特定的工具箱中，您有一个输入字段，您可以在其中粘贴并提交Youtube或Vimeo URL。根据该网址，我正在更改当前页面上的视频。

我遇到的问题是，当我点击触发器时，我没有得到一个，三个工具箱（如果我有三个视频在网页上，我点击第一个），两个工具箱（如果我有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提交”而不仅仅是当前实例。

向下面的选择器添加一个上下文，像这样（我可能已经忘记了一些，检查你的代码）。

对于<a>链接，打开弹出：

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

对于弹出里面的元素：

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

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

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

DEMO

Answer 2

从非常快看看它的代码似乎是

$('.videoPlaceholder') 

和

$('.videowidget-submit') 

不限于$（本）对象，这样他们正在注册的每个页面上的情况下，事件的背景。即时通讯不知道是否有更多的地点发生这种情况。

我已经使用了JqueryUI工具包来编写我自己的JQuery插件，它的设置非常简单。一个不错的地方，从这开始是 http://wiki.jqueryui.com/w/page/12138135/Widget-factory