Question

嗨朋友我希望当用户点击某个按钮时，此代码<div class="row><input type="radio" name="radio"></div>"会附加到body。

现在问题是名为.row的div是完全可点击的，当用户点击div时，其子<input type="radio" name="radio">应为trigger clicked。但是我的代码根据我的要求没有工作，它给了我一个错误，在控制台中显示too much recursion。我不知道这是什么。

您可以在此处查看我的代码 http://jsfiddle.net/L9sezwge/ ，或者您可以在下方查看

SCRIPT

$('button').click(function(){
$('body').append('<div class="row"><input type="radio" name="radio">dd</div>')
})
$(document).on('click','.row',function(e){

$('.row').removeClass('gray')
$(this).addClass('gray')
$(this).find('input').trigger('click')

})

HTML

<button>Click</button>

CSS

.row{padding:10px 40px; cursor:pointer;}
.row:hover{color:red;}
.gray{background:gray; color:red;}

Answer 1

您需要停止来自输入广播的事件传播，否则它将继续触发div click事件。请检查此example

$('button').click(function(){
$('body').append('<div class="row"><input type="radio" name="radio">dd</div>')
})
$(document).on('click','.row',function(e){

$('.row').removeClass('gray');
$(this).addClass('gray');
$(this).find('input').trigger('click');

});

$(document).on('click','input:radio',function(e){
    e.stopImmediatePropagation(); // e.stopPropagation() is also ok, if you only want to prevent click on parent div 
});

Answer 2

最干净的方式

最干净的方式是使用.prop('checked',true);而不是.trigger('click')。这样，就不会发生传播，因为没有触发UI事件。

$('button').click(function(){
     $('body').append('<div class="row"><input type="radio" name="radio">dd</div>');
});
$(document).on('click','.row',function(e){

     $('.row').removeClass('gray');
     $(this).addClass('gray');
     $(this).children('input').prop('checked',true); //Changed find() to children as well.

});

查看此demo on JSFiddle。

Answer 3

或者只是另一种方式。只需用标签包装你的收音机输入。

$('button').click(function(){
    $('body').append('<label class="row"><input type="radio" name="radio">dd</label>')
})
$(document).on('click', '.row', function(){
    $('.row').removeClass('gray');
    $(this).addClass('gray');
});

并确保标签显示为阻止

.row{display:block; padding:10px 40px; cursor:pointer;}

单击div触发无线电

3 个答案:

最干净的方式