JQuery функция, которая выбирает якорь с определенным классом - PullRequest
1 голос
/ 20 февраля 2012

В моей карте сайта у меня есть несколько якорей внутри ячеек таблицы ...

<table class="table_site">
    <tr>
        <td class="subsite"><a class="l1" href="#">link1</a></td>
        <td class="subsite"><a class="l2" href="#">link2</a></td>
        <td class="subsite"><a class="l3" href="#">link3</a></td>
        <td class="subsite"><a class="l4" href="#">link4</a></td>
    </tr>
</table>

У меня есть скрипт jquery для вызова любой щелчковой привязки переключения функций.

<script  type="text/javascript">
    $('a.l1').bind('click', function () {
    //code here
    });
</script>

Это вообще не работает

Как мне позвонить на конкретный якорь ??

Спасибо

Ответы [ 2 ]

1 голос
/ 20 февраля 2012

это происходит, потому что DOM (объектная модель документа) не готова. Попробуйте этот фрагмент

$(document).ready(function(){
    $('a.l1').click(function(){
        //code logic goes here
    });
});

, если тег привязки генерируется на лету, то есть путем манипулирования DOM с помощью javascript, затем используйте .on()из .click() method
Также обратите внимание, что если вы используете версию jQuery старше 1.7, то использование .delegate() вместо .on() coz последняя функция работает только с jQuery 1.7 +

1 голос
/ 20 февраля 2012

В зависимости от того, где вы размещаете JavaScript, он может быть запущен до создания DOM.Привязка будет активна только для элементов, которые существовали в DOM при вызове метода.Вам необходимо совершить вызов в пределах $ (document) .ready (function () {});вызов.Это гарантирует, что связывание происходит только тогда, когда загружен весь DOM.

Другое предложение заключается в том, что вы не используете связывание.Как я уже упоминал, он не будет привязываться к элементам, созданным после вызова метода.Лучше использовать либо live () (pre-jQuery1.7), либо on () (post-jquery 1.7).Вот пример использования на:

$(function () { $(".table_site").on("click", "a.l1", function(e) { ... do stuff ...});});
...