Проблема: Мой jQuery плагин требует селектора входа. Когда я использую один входной селектор с одним экземпляром моего плагина, он работает, но когда я использую несколько экземпляров моего плагина с различным входным селектором для каждого экземпляра плагина, он заполняет все входы, которые не соответствуют ожиданиям.
(function ($) {
"use strict";
$.fn.myPlugin = function (option) {
var defaults ={
selector:null
}
var config = $.extend(defaults, option)
var _html ='<div class="mp_wrapper" style="display:none">\
<button class="mp_test">Test</button>\
</div>';
if ($('div.mp_wrapper').length === 0) {
$('body').append(_html);
}
$(this).click(function (e) {
var list = $('div.mp_wrapper');
if (list.is(':hidden')) {
$('div.mp_wrapper').css({
display:'block',
position:'absolute',
top:e.pageY,
left:e.pageX
})
}else{
list.css('display','none')
}
})
// problem occur here
$('body').on('click', '.mp_test', function () {
config.selector.val(+ new Date())
})
}
})(jQuery)
$(function(){
$('.btn1').myPlugin({selector:$('.txt1')})
$('.btn2').myPlugin({selector:$('.txt2')})
})
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script>
<div>
<input type="text" class="txt1">
<button class="btn1">Pick</button>
</div>
<br>
<div>
<input type="text" class="txt2">
<button class="btn2">Pick</button>
</div>
Я также пытался var config = $.extend(defaults, option)
, но ничего не изменилось.