Радио-кнопка внутри анкерного элемента сбрасывается после обработки jQuery clicker

У меня есть ситуация, когда элемент, тип радио, содержится в элементе. Якорный элемент имеет href, но я хочу переопределить это поведение, добавив обработчик jQuery 'click' к элементу.Радио-кнопка внутри анкерного элемента сбрасывается после обработки jQuery clicker

Обработчик кликов делает переключатель внутри него выбранным внутри группы. Это все работает, когда клик нажимается, однако, когда щелкает радиокнопка, появляется, что 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 для сброса переключатель?

источник

2011-01-06 GrievousAngel

Самый простой способ я нашел, чтобы решить эту проблему, чтобы удалить HREF атрибута из элемента анкера во время события щелчка:

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

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

источник

2011-01-06 16:15:44 GrievousAngel

Просто заметил, что ты избил меня. :) Да, проблема заключается в том, что смена переключателей меняется, так что это работает. – Chris

Но вы не можете щелкнуть якорь, у которого нет атрибута 'href', ну, по крайней мере, его недействительный тег. –

Браузер может не показывать визуальный индикатор, что это ссылка, но я думаю, что могу предоставить правило hover css для изменения указателя, которое я еще не могу сделать. – GrievousAngel

<script type="text/javascript"> 
    $(document).ready(function() { 
     $("input:radio").click(function(event){event.stopPropagation();}); 

    });

источник

2011-01-06 11:44:21

Извините, Jishnu это не исправит проблему. Выбранный ранее переключатель будет выбран после нажатия на невыбранный. – GrievousAngel

Я думал, что это работает, проверьте эту ссылку --http: //jsfiddle.net/MUgXY/ –

@Jishnu Итак, получается, что у вас был и ответ. –

Это немного странный способ делать вещи. Вы можете получить эффект вы после этого сначала с помощью 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'); 
    } 
});

источник

2011-01-06 11:47:48

Маркус, я ценю помощь. однако я застрял с элементами привязки. – GrievousAngel

Извините, прервите мой комментарий. Html генерируется приложением ASP.Net, а привязки - от LinkButtons. [Нотабене Я не могу изменить LinkButtons ни на что другое. – GrievousAngel

Не проблема, я добавил еще один ответ, который касается этого ограничения. –

$('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». При щелчке сначала выбирается первый вход радиокнопки внутри тега a, а затем проверяется.

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

источник

2011-01-06 14:16:36

Marcus, который делает то же, что и мой метод anchorClicked в вопросе. Проблема в том, что после выбора одной из переключателей невозможно выбрать другую, щелкнув по ней. Он выбирается изначально, но становится недоступным после завершения обработчика события клика. – GrievousAngel

Вы пробовали этот код (модифицированный для добавления 'return false'), я предположил, что ваш не работает из-за немного сложной настройки. Нет причин, почему это не сработает. –

@Marcus Whybrow: Ваши предположения были ложными. Это не сработало, потому что ваше возвращение false отменяет действие переключателя и тем самым меняет факт его изменения. См. Мой ответ для некоторых примеров, демонстрирующих это в действии. – Chris

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

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

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

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

источник

2011-01-06 16:23:39 Chris

Радио-кнопка внутри анкерного элемента сбрасывается после обработки jQuery clicker

ответ

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