jquery, событие click иногда не работает - PullRequest
Новая
       2

jquery, событие click иногда не работает

0 голосов
/ 05 марта 2012

У меня есть форма с несколькими input type="radio" с текстом рядом с ними.Я хочу скрыть эти inputs и показать только текст, который будет реагировать на нажатия и изменять значение inputs и цвет фона.

HTML: 

<div class="right">
  <div>
    <span onclick='$("input.rg1").attr("checked", false).change();'>Choose</span>
    <div>A<input type="radio" name="radio[1]" class="rg1" value="1"></div>
    <div>B<input type="radio" name="radio[1]" class="rg1" value="2"></div>
    <div>C<input type="radio" name="radio[1]" class="rg1" value="3"></div>
  </div>
</div>

Javascript: 

// Bind click event on divs and send it to radio input
$("div.right div div").click(function(e){
if(!$(e.target).is("input") )
{
    alert("Clicked Div/Text!")
    $(e.target).children("input").click();
}
});

// Hide all radio inputs, make only texts visible
$("div.right input[type='radio']").hide();

// Bind change event on radio inputs, change
// background-color of text that is next to clicked radio input
$("div.right input[type='radio']").change( function(e){
    alert("change Event "+$(e.target).is(":checked"));
    if( $(e.target).is(":checked") )
    {
        $(e.target).parent().css("background-color", "#A00");
    }
    else
    {
        $(e.target).parent().css("background-color", "#00A");
    }
});

Проблема в том, что, когда я нажимаю на текст рядом с радио (например, А), всплывают 2 оповещения и меняется цвет фона, но если я нажимаю на этот текст снова, я получаю только первое оповещение,но не второй.Зачем?Сразу после первого предупреждения есть $(e.target).children("input").click();, который должен запустить это событие изменения, но это не так, хотя никаких условий нет.

Может кто-нибудь дать мне совет, что случилось?Спасибо

Ответы [ 3 ]

1 голос
/ 05 марта 2012

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

Попробуйте использовать флажки, и это будет работать -> http://jsfiddle.net/jPMF9/

1 голос
/ 05 марта 2012

Проблема в том, что вы используете событие изменения, которое не срабатывает при повторном нажатии радио, поскольку оно не меняется.Но, основываясь на вашем коде, вы можете рассмотреть возможность использования меток, которые позволят вам в любом современном браузере, кроме IE8, получить тот же эффект с чистым CSS.Единственная загвоздка в том, что ваш ярлык должен следовать вашему вводу.

Ваш HTML переделан с ярлыками: 

<input type="radio" id="radioa" name="radio[1]" class="rg1" value="1" />
<label for="radioa">A</label>
<input type="radio" id="radiob" name="radio[1]" class="rg1" value="2" />
<label for="radiob">B</label>
<input type="radio" id="radioc" name="radio[1]" class="rg1" value="3" />
<label for="radioc">C</label>

CSS: 

[type=checkbox], [type=radio] {
    display: none;
}    

[type=checkbox] + label, [type=radio] + label {
     background-color: #00A;
}

:checked + label {
     background-color: #A00;
}

И это делает,Я пошел вперед и сделал это как для радио, так и для флажков, так как оба доступны для проверки, но, как я уже сказал, он работает, только если его <input /><label></label>, так как CSS не позволяет (и может никогда не использовать) родительские селекторы и пока не позволяетдля предыдущих селекторов родного брата.Если этот заказ не вариант, вы вернетесь к выполнению через JS.

0 голосов
/ 05 марта 2012

Вы можете проверить это решение: 

// Bind click event on divs and send it to radio input
$("div.right div div").unbind("click").bind("click", function(e){
if(!$(e.target).is("input") )
{
    alert("Clicked Div/Text!")
    $(e.target).children("input").attr("checked", "checked");
    $(e.target).children("input").trigger("change");
}
});

// Hide all radio inputs, make only texts visible
$("div.right input[type='radio']").hide();

// Bind change event on radio inputs, change
// background-color of text that is next to clicked radio input
$("div.right input[type='radio']").unbind("change").bind("change", function(e){
    alert("change Event "+$(e.target).is(":checked"));
    if( $(e.target).is(":checked") )
    {
        $(e.target).parent().css("background-color", "#A00");
    }
    else
    {
        $(e.target).parent().css("background-color", "#00A");
    }
});
...