JQuery цепочки в IE

Question

У меня есть плагин jquery, который я называю так:

$(function() {

   $('.link_class').jquery_plugin()
})

со множеством тегов привязки в теле

<a href="http:...." class="link_class">link 1 </a>
 <a href="http:...." class="link_class">link 2 </a>
 <a href="http:...." class="link_class">link 3 </a>

плагин jquery настроен следующим образом:

$.fn.jquery_plugin = function(options) {        

    if ($(this).is('a' ) ) {    

        this.each(function() {


            $(this).bind('click', function(){


                    options.content = options.content ||  $(this).attr('href');


                return javascript_plugin (options), false;



            })


        })

    }

};

javascript_plugin  = function (options) { 

        return  alert(options.content);

};

Моя проблема в том, что когда я использую IE, ссылка на которую я нажимаю в первую очередь, будет указывать, что содержимое отображается в предупреждении. следовательно, если я сначала нажму на ссылку 2, будет отображаться ссылка на ссылку 2 независимо от того, по какой ссылке я нажму после ... какие-либо идеи относительно того, что я могу делать неправильно? спасибо

Answer 1

Я не уверен на 100% относительно контекста каждой из ссылок «this» и того, ссылаются ли они на «this», неявное при вызове локальной функции, или на «this» во вмещающей функции, но это, вероятно, связано с объяснением.

В любом случае, в вашем коде есть небольшой недостаток, который проявится только в том случае, если один из вас назначит linkClass элементу, который не является «a». Чтобы это исправить, выполните проверку на наличие «a» внутри цикла, поскольку метод «is» вернет true, если какой-либо из элементов в коллекции jquery соответствует критериям, и, когда это будет сделано вне цикла, вызовет все элементы, к которым привязан обработчик кликов, независимо от того, являются они «а» или нет ...

$.fn.jquery_plugin = function(options) {         
    this.each(function() { 
        if ($(this).is('a' ) ) {     
            $(this).bind('click', function(){ 
                options.content = options.content ||  $(this).attr('href'); 
                return javascript_plugin (options), false; 
            }) 
        }) 
    } 
    return this;
}; 

javascript_plugin  = function (options) {  
    return  alert(options.content); 
}; 

В качестве альтернативы, просто включите 'a' в селектор, используемый при вызове вашего плагина ...

$(function() {       
    $('a.link_class').jquery_plugin()       
})       

... и удалите необходимость проверки 'a' в плагине ...

$.fn.jquery_plugin = function(options) {         
    this.each(function() { 
        $(this).bind('click', function(){ 
            options.content = options.content ||  $(this).attr('href'); 
            return javascript_plugin (options), false; 
        }) 
    } 
    return this;
}; 

Большой вопрос для меня: относится ли последнее «this» к элементу DOM, по которому щелкают, или к элементу текущей итерации цикла «each». Это должно быть первое.

EDIT:

Теперь я вижу проблему - тот факт, что 'options' устанавливается на значение href элемента, только если он в данный момент пуст. После этого он остается один и сохраняет ранее установленное значение. Попробуйте вместо этого создать локальную переменную ...

$.fn.jquery_plugin = function(defaultOptions) {         
    this.each(function() { 
        $(this).bind('click', function(){ 
            var options = createAnOptionsInstance(); //do what it says
            options.content = defaultOptions.content ||  $(this).attr('href'); 
            return javascript_plugin (options), false; 
        }) 
    } 
    return this;
}; 

Ваш исходный код не показывает какую-либо опцию, передаваемую плагину, поэтому вам, вероятно, понадобятся некоторые дополнительные проверки для этого.

Answer 2

В целом вы смотрите на такие изменения:

$.fn.jquery_plugin = function(options) {        
  options = options || {};
  return this.filter('a').bind('click', function() {
    var content = options.content || $(this).attr('href');
    return javascript_plugin ({ 'content': content });
  }).end();
};

javascript_plugin  = function (options) { 
  return  alert(options.content);
};

Вы можете попробовать это здесь , было несколько проблем, мы пойдем в следующем порядке:

• options будет неопределенным, как ваш пример вызова, необходимо учитывать это при доступе к options.content.
• Проверка .is('a') должна быть на элемент (в противном случае выполняется проверка любого элемента набора, поэтому вместо этого выполните .filter('a') перед .bind().
• Вам нужно вернуть набор, чтобы продолжить связывание, теперь это происходит (обратите внимание на .end(), поэтому мы не возвращаем .filter() версию набора) .
• Наконец, не изменяйте оригинальный объект параметров, поэтому вы получаете поведение первой ссылки.