jQuery using div as radio button

Question

I am setup right now to use a div tag to trigger a hidden radio button. However, when I click once on the div, the radio button switches, but it I must double click the div in order for the data to be sent via ajax. Any ideas on what is causing this and how to fix it?

jQuery

$(function(){
    $(".albumcover_tag").click(function(e){
        e.stopPropagation();
        $('.edit_album').trigger('submit.rails');
    });
    $(".albumcover-item").click(function(e){
        $('.albumcover-item').removeClass("radio-selected");
        $(this).addClass("radio-selected");
        $(this).find('input').click();
        return false;
    });
    $('.albumcover_tag:checked').parent('.albumcover-item').addClass("radio-selected");
});

HTML

<div class="albumcover-item">
    <label for="album_albumcover">Set as Album Cover </label>
    <input class="albumcover_tag" id="album_albumcover_id_2" name="album[albumcover_id]" type="radio" value="2">
</div>

NOTE: I want to be able to enable the ajax on single click, not double click.

i think .click() and .dblclick() will be in conflict if added to same item. — Davor Mlinaric, Apr 26 '13 at 06:38
for your first question take a look of this fiddle http://jsfiddle.net/sarfarazdesigner/myLTC/2/ — The Mechanic, Apr 26 '13 at 06:51

score 0 · Answer 1 · edited May 23 '17 at 11:43

you wil find answer here, you have to cancel single click when triggering doubleclick.

Need to cancel click/mouseup events when double-click event detected

function singleClick(e) {
    // do something, "this" will be the DOM element
}

function doubleClick(e) {
    // do something, "this" will be the DOM element
}

$(selector).click(function(e) {
    var that = this;
    setTimeout(function() {
        var dblclick = parseInt($(that).data('double'), 10);
        if (dblclick > 0) {
            $(that).data('double', dblclick-1);
        } else {
            singleClick.call(that, e);
        }
    }, 300);
}).dblclick(function(e) {
    $(this).data('double', 2);
    doubleClick.call(this, e);
});

score 0 · Answer 2 · answered Apr 26 '13 at 06:44

0

Try this:

$(function(){
    $(".albumcover-item").click(function(e){
        $('.albumcover-item').removeClass("radio-selected");
        $(this).addClass("radio-selected");
        $('.edit_album').trigger('submit.rails');
    });
});

answered Apr 26 '13 at 06:44

vher2

980
6
9

this didn't work because it didn't change the radio button which the form relies on. – derek_duncan Apr 26 '13 at 06:58

score 0 · Answer 3 · answered Apr 26 '13 at 07:04

0

I fixed it by moving the ajax request to the div element's click() trigger.

$(".albumcover-item").click(function(e){
    ...
    $('.edit_album').trigger('submit.rails');
    ...
});

answered Apr 26 '13 at 07:04

derek_duncan

1,377
1
13
22

jQuery using div as radio button

3 Answers3