Функция jQuery click работает только на первом элементе

Question

У меня проблемы с jQuery.

Я делаю простую CMS, и в интерфейсе у меня есть список страниц, в каждом элементе списка есть ссылка для редактирования. Я заставил jQuery прослушивать клики с этим идентификатором редактирования. Затем он будет смотреть на родительский LI, чтобы увидеть, какой у него идентификатор, чтобы пользователь мог сохранить изменения в нужном pageId в базе данных.

Мой список

<ul id="sortable" class="ui-sortable">
    <li class="sortable" id="listItem_1">
        <a href="#" id="edit">edit</a>
        <span id="title">List item 1</span>
    </li>

    <li class="sortable" id="listItem_2">
        <a href="#" id="edit">edit</a>
        <span id="title">List item 2</span>
    </li>

    etc..
</ul>

И JavaScript

<script type="text/javascript">
$(document).ready(function() {
    $('a#edit').click(function(){
        alert($(this).parent("li").attr("id"));
    })
});

Но работает только первая ссылка для редактирования. Все остальные просто игнорируются. Вы можете увидеть проблему, работающую здесь, http://info.radio -onair.ath.cx / active / scms / admin / pages / test.html

Заранее спасибо.

Answer 1

В HTML id относится к уникальному идентификатору . Другими словами, использование двух элементов с одинаковым id противоречит стандартам. jQuery здесь ведет себя правильно.

Используйте class вместо id, чтобы идентифицировать ваши теги как таковые:

HTML:

<ul id="sortable" class="ui-sortable">
    <li class="sortable" id="listItem_1">
        <a class="edit" href="#">edit</a>
        <span id="title">List item 1</span>
    </li>

    <li class="sortable" id="listItem_2">
        <a class="edit" href="#">edit</a>
        <span id="title">List item 2</span>
    </li>

    etc..
</ul>

JavaScript:

$(document).ready(function() {
        $('a.edit').click(function(){
                alert($(this).parent("li").attr("id"));
        })
});

---

В качестве альтернативы, так как родительский тег уже, кажется, имеет уникальный класс, вы можете просто использовать его для определения целевых тегов. Это уменьшит то, что я называю «шумом класса» (определение бесполезного класса для целевого элемента, на который могут быть нацелены уникальные атрибуты их родителя).

HTML:

<ul id="sortable" class="ui-sortable">
    <li class="sortable" id="listItem_1">
        <a href="#">edit</a>
        <span id="title">List item 1</span>
    </li>

    <li class="sortable" id="listItem_2">
        <a href="#">edit</a>
        <span id="title">List item 2</span>
    </li>

    etc..
</ul>

JavaScript:

$(document).ready(function() {
        $("li.sortable a:contains('edit')").click(function(){
                alert($(this).parent("li").attr("id"));
        })
});

Answer 2

Я думаю, это потому, что для каждого элемента используется один и тот же id . Попробуйте вместо этого использовать класс.

<a href="#" class="edit">edit</a>

А потом

$('a.edit').click(...)

Answer 3

Вы не можете иметь два элемента с одинаковым идентификатором. Это неверный HTML. Возможно, вы хотите вместо этого класс?

Попытка:

<ul id="sortable" class="ui-sortable">
    <li class="sortable" id="listItem_1">
        <a href="#" class="edit">edit</a>
        <span id="title">List item 1</span>
    </li>

    <li class="sortable" id="listItem_2">
        <a href="#" class="edit">edit</a>
        <span id="title">List item 2</span>
    </li>

    etc..
</ul>


<script type="text/javascript">
$(document).ready(function() {
    $('a.edit').click(function(){
        alert($(this).parent("li").attr("id"));
    })
});
</script>       

Answer 4

идентификаторы должны быть уникальными, а имена классов могут быть одинаковыми.

Answer 5

Если вы не хотите менять свой HTML (но вы должны), вы можете попробовать это:

$(document).ready(function() {
        $('a:contains("edit")').click(function(){
                alert($(this).parent("li").attr("id"));
        })
});

Answer 6

Я попробовал вашу ссылку, и похоже, что все оповещения подключены и работают правильно, но не в последовательном порядке (2 - 5 и т. Д.)

Answer 7

Понятия не имею, что говорили все остальные, но я просто изменил

<a id="anyidname".. 

из модного ящика ... к этому скрипту в конце моей html / php-страницы ... и тегу к

<a rel="anyclassname"..

<script type="text/javascript">
 $(document).ready(function(){
$('a[rel="anyclassname"]').fancybox({
    'width'         : '75%',
    'height'        : '75%',
    'autoScale'         : false,
    'transitionIn'      : 'none',
    'transitionOut'     : 'none',
    'type'          : 'iframe'
});
  });
</script>"