交换后交换的无线电互相叠加

时间:2013-09-07 18:32:46

标签: javascript jquery css ajax

事件处理程序有问题,就像鼠标一样,div会打开并关闭3次。

交换的无线电也会覆盖或偏移。

我已尝试过所有内容,我认为这与我使用event.preventDefault();

的方式有关

UPDATE_ _

菜单开放3x固定,但div中的交换无线电仍然重叠任何想法?

http://www.apecharmony.co.uk

// RADIO BUTTON
$("input[name='domain_ext']").each(function () {
    $("#domaindropradio1").attr('checked', 'checked');
    var lbl = $(this).parent("label").text();
    if ($(this).prop('checked')) {
        $(this).hide();
        $(this).after("<div class='radioButtonOn'>" + lbl + "</div>");
    } else {
        $(this).hide();
        $(this).after("<div class='radioButtonOff'>" + lbl + "</div>");
    }
});

$("input[type=radio]").change(function () {
    $(this).siblings('.radioButtonOff').add('.radioButtonOn').toggleClass('radioButtonOff radioButtonOn');
});

// RIBBON RADIO DROPBOX
$('div.ribbonBoxarrow').click(function () {
    $('.ribbonBoxarrow li').show('medium');
});
$('.ribbonBoxarrow li').mouseleave(function () {
    $(this).hide('slow');
});
$("input[name='domain_ext']").parent('label').click(function () {
    $('.ribbonBoxarrow li').hide('slow');
    event.preventDefault();
});

//SWAP SECECTED RADIO
$("div.radiogroup2").on("click", ":radio", function () {
    var l = $(this).closest('label');
    var r = $('#radioselected');
    r.removeAttr('id');
    l.before(r.closest('label'));
    $(this).attr('id', 'radioselected');
    l.prependTo('.radiogroup1');
});

2 个答案:

答案 0 :(得分:1)

回应:

  

div打开和关闭3次。

您的动画会触发比您想要的更多事件。此外,您的preventDefault()并未阻止其他点击事件触发。

对于$("input[name='domain_ext']").parent('label')点击事件,请尝试以下操作:

$("input[name='domain_ext']").parent('label').click(function () {
  $('.ribbonBoxarrow li').mouseleave();
  event.stopImmediatePropagation();
});

第二期:

  

交换的无线电也会覆盖或偏移。

看起来您正在将单选按钮添加到具有radiogroup1类的元素,但您可能希望单选按钮位于嵌套表元素中。

答案 1 :(得分:1)

解决了,使用表来保存元素是造成问题的原因。如果需要,则必须将单元格作为交换目标。