jQuery: как $ .on должен работать?

Существует сайт с одной главной index.html страницы (с <html><head>...) и страницами, как gallery.html, contacts.html, но только с <div> контейнеров и без <html><head>....

Так что, когда я нажимаю на ссылку, чтобы index.htmlcontacts.html что происходит:

$('.contacts').click(function(e) { 
    e.preventDefault(); 
    $('#content').load('contacts.html', function() { 
     ..... 
    }); 
});

Q: Как я должен структурировать или организовать код яваскрипта для любых событий, как click на contacts.html?

Например:

[1] Я могу написать на contacts.html Javascript код как:

<script type='text/javascript'> 
$(function() { 
    $('.anyClassOnContactsHtml').click(function(e) { 
     ..... 
    }); 
}); 
</script>

Но, как я предполагаю, каждый раз, когда я загрузить contacts.html он снова читает функции, и поэтому скорость и производительность сайта могут быть ниже, потому что у меня есть 50+ кликов на каждой странице.

[2] Я могу написать на index.html делегатов: (!)

<script type='text/javascript'> 
$(function() { 
    $('#content').on('click', '.anyClassOnContactsHtml', function(e) { 
     ..... 
    }); 
}); 
</script>

Он работает и браузеры распознают нажмите функции 1 раз, но с более чем 100 функциями щелчка есть 2-3 секундная задержка, поэтому работает очень медленно.

Работать быстрее я должен вместо #content контейнера записи, которая ближе к моему .anyClassOnContactsHtml, но я не могу, потому что на index.html есть только #container.

Итак, как мне это сделать? Или существуют другие способы связывания событий? Какие-нибудь советы по работе сайта? Спасибо.

источник

2013-07-20 sirjay

Я думаю, что единственный способ, которым вы собираетесь добиться успеха, - это оптимизировать некоторые из ваших функций щелчка, чтобы объединить их и сделать их более универсальными, добавив больше параметров метода, операторов switch и т. Д. Наиболее эффективным способом было бы привязать их все к #content, так как их не нужно перезагружать каждый раз, когда есть изменение URL. Атрибут данных может очень помочь с этим. Если вы потратили время, чтобы сделать это правильно, вы можете даже реорганизовать весь свой код в одну функцию обработчика событий.

очень надуманный пример функции, как это было бы:

$('#content').on('click', 'a, span, input', function(e) { 
    var tagName = $(e.target).prop('tagName'); 
    switch (tagName) { 
     case 'a': 
      processAnchorEvents(); 
      break; 
     case 'span': 
      processSpanEvents(); 
      break; 
     case 'input': 
      processInputEvents(); 
      break;     
    } 
});

источник

2013-07-20 23:05:25

1) Вы можете на самом деле назвать суб-элементов таким образом.

${"#content .anyClassOnContactsHtml").click(function() { });

2) Посмотрите на: http://developer.yahoo.com/yslow/. Например, размещение меток <script> в нижней части <body> </body> позволит остальной части страницы загружаться быстрее.

Установите плагин и запустите тест на своей странице.

источник

2013-07-20 23:20:19

i Это неправда, это не хороший селектор: когда это так, то используйте find() как: '$ {" # content "). find (". anyClassOnC ontactsHtml ")' – reyaner

@reyaner Оба работают, но найти намного быстрее в более крупной структуре. Спасибо, что упомянул об этом. –

Когда вы используете load(), любой код в загруженных тегах скрипта полностью игнорируется, поэтому он не влияет на производительность javascript.

Возможно, проблема в том, как загружается контент. Убедитесь, что вы не повторно привязываете функции щелчка каждый раз. Вот пример кода:

<script type='text/javascript'> 
$(function() { 

    $('.contacts').click(function(e) { 
     e.preventDefault(); 
     $('#content').load('contacts.html', function() { 
      // DO NOT REBIND CLICK EVENTS HERE 
     }); 
    }); 

    // The following should only be done ONCE 
    $('#content').on('click', '.anyClassOnContactsHtml', function(e) { 
     ..... 
    }); 
}); 
</script>

источник

2013-07-20 23:21:27 Mottie

Что-то вроде этого действительно так медленно? Я бы сказал, что все должно быть в порядке!

<script type='text/javascript'> 
$(function() { 
    $('.contacts').click(function(e) { 
     e.preventDefault(); 
     $('#content').load('contacts.html', function() { 
      $('#content_of_loaded').on('click', '.anyClassOnContactsHtml', function(e) { 
       ..... 
      }); 
     }); 
    }); 
}); 
</script>

Может быть, вы могли бы попробовать это:

<script type='text/javascript'> 
    $(function() { 
     $('a').click(function(e) { 
      e.preventDefault(); 
      var site = $(this).attr("href"); 
      $('#content').load(site, function() { 
       $('#sub_content').on('click', '.anyClassOnContactsHtml', function(e) { 
        ..... 
       }); 
      }); 
     }); 
    }); 
</script>

а также для ваших subcontent ссылок вы могли бы сделать это возможно ..

function loadContent(site) { 
    $('#content').load(site, function() { 
     $('#sub_content').on('click', 'a', function(e) { 
      e.preventDefault(); 
      loadContent($(this).attr("href")); 
     }); 
    }); 
} 
$(function() { 
    $('a').click(function(e) { 
     e.preventDefault(); 
     loadContent($(this).attr("href")); 
    }); 
});

, но я не проверить его, так что может быть Неправильно :)

источник

2013-07-20 23:23:01 reyaner

Все эти решения по-прежнему приводят к 50 + щелчкам функций, которые, по его словам, были причиной медленности, поэтому, если это так, ни одно из них не будет иметь значения до тех пор, пока не будет выполнен какой-либо рефакторинг. Например, нет причин, по которым у вас не может быть одной функции щелчка для большинства/всех событий, даже если эта функция выполняет только задание для вызова других функций. –

jQuery: как $ .on должен работать?

ответ

Смежные вопросы