Переключатель внутри элемента привязки сбрасывается после обработчика щелчков jQuery - PullRequest
Новая
       1

Переключатель внутри элемента привязки сбрасывается после обработчика щелчков jQuery

2 голосов
/ 06 января 2011

У меня есть ситуация, когда элемент типа radio содержится в элементе. У элемента привязки есть href, но я хочу переопределить это поведение, добавив к элементу обработчик jQuery 'click'.

Обработчик щелчков делает переключатель внутри него выбранным в группе. Это все работает при щелчке якоря, однако при щелчке переключателя оказывается, что jQuery сбрасывает выбранное радио до ранее выбранного!

Вот упрощенная страница, которая дублирует проблему: 

<html>
<head>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js"></script>
    <script type="text/javascript">
        $(document).ready(function() {
            $("#a1").click(function(event) {
                anchorClicked("a1");
                return false;
            });
            $("#a2").click(function(event) {
                anchorClicked("a2");
                return false;
            });
        });

        function anchorClicked(anchorId)  {
            $('#' + anchorId + ' input:radio').attr("checked", true);
            alert("Look at what is selected and what happens after the event when this dialog is closed!");
        }
    </script>
</head>
<body>
    <form>
        <ul>
            <li id="li1"> 
                <a id="a1" href="javascript:alert('default functionality')">
                    <input value="1" name="rb" type="radio" id="rb1">
                    <span>Details 1</span>
                </a>
             </li>
            <li id="li2"> 
                <a id="a2" href="javascript:alert('default functionality')">
                    <input value="2" name="rb" type="radio" id="rb2">
                    <span>Details 2</span>
                </a>
             </li>
        </ul>
    </form>
</body>

Кто-нибудь знает, как я могу предотвратить сброс jQuery переключателя?

Ответы [ 5 ]

2 голосов
/ 06 января 2011 
<script type="text/javascript">
    $(document).ready(function() {
        $("input:radio").click(function(event){event.stopPropagation();});

    });
0 голосов
/ 06 января 2011

Проблема в том, что ваше «return false» для отмены поведения тега привязки по умолчанию также отменяет поведение щелчка по переключателю, поэтому он устанавливает его обратно в исходное состояние независимо от действий события click , Установка функций для возврата true показывает ожидаемое поведение (а также функцию щелчка по умолчанию).

Чтобы исправить это, наконец, вы хотите полностью избавиться от события щелчка по умолчанию. Чтобы сделать это, вы можете очень просто изменить href на "#", чтобы он мало что делал при действии. См. http://jsfiddle.net/FrcRx/1/ для примера этого в действии.

лучший способ сделать это - полностью удалить атрибут href. Это, конечно, заставляет большинство браузеров не рассматривать его как ссылку, поэтому вам придется самостоятельно применить соответствующий стиль, чтобы они по-прежнему выглядели как ссылки.

Это делается с помощью функции jAquery removeAttr и функции addClass. Смотрите демонстрацию здесь: http://jsfiddle.net/FrcRx/2/

0 голосов
/ 06 января 2011

Я нашел самый простой способ решить эту проблему - удалить атрибут href из элемента привязки во время события click: 

  $("#a1").click(function(event) {
    this.removeAttribute("href");            
    anchorClicked("a1");
  });

Это означает, что мне больше не нужно возвращать false, чтобы предотвратитьповедение по умолчанию и событие могут безопасно вызвать DOM, и тогда все будет работать.

0 голосов
/ 06 января 2011 
$('input:radio').click(function(e) { 
    e.stopPropagation();
});

$('a[id^="a"]').click(function(e) {
    $('input:radio:first', this).attr("checked", true);
    return false;
});

Важной частью является остановка распространения события щелчка при нажатии переключателя.Однако, похоже, что если вы вернете false, тогда переключатель не будет выбран, как вы ожидаете.

Далее мы привязываем событие click к любому тегу a, идентификатор которого начинается с буквы "а».При щелчке выбирается первая кнопка переключателя внутри тега a, а затем проверяется.

DEMO: http://jsfiddle.net/marcuswhybrow/mg66T/2/

0 голосов
/ 06 января 2011

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

<label><input value="1" name="rb" type="radio" id="rb1" /> Details One</label>
<label><input value="2" name="rb" type="radio" id="rb2" /> Details Two</label>

Делая этот щелчок в любом месте элемента label, вы установите переключатель.

Оттуда вы должны следить за событием изменения на переключателях, если вы хотите: 

$('input:radio[name="rb"]').change(function() {
    if (this.checked) {
        alert('remember the deselected radio button changes also');
    }
});
...