单选按钮不触发Html按钮单击事件

Question

我有一个单选按钮列表。当我单击单选按钮时，相应的内容就会显示出来，这些内容就是滑块内容。为此，我使用了jquery.bxslider.js。它在两种情况下工作正常：

1-当我点击单选按钮时。2-当我创建一个单独的按钮时，调用onclick事件中的函数。然后按下那个按钮。这一点的定义如下。

<input id="checkbtn1" type="button" value="show" onclick="javascript:checkButton();" />

<script>        

function checkButton() {
$("#plan-3").prop("checked", true);
$("input:radio[name=PremiumGroup][id=plan-3]").trigger('click');
}
</script>

但我的要求是自动触发按钮事件或任何如何点击单选按钮让各自的滑块显示。我已经为此目的编写了以下代码，但它只选择了单选按钮，而没有触发事件。

<script>
    $("#checkbtn1").click();
</script>

有谁能帮上忙吗？

Answer 1

我试过这样的方法，它起作用了：

$(document).ready(function(){

  $('#checkbtn1').click(function(){
    $('#plan-3').prop("checked", true).trigger('click');
  });

  $('#plan-3').click(function(){
    alert('radio button clicked');    
  });
});

检查这个小提琴：https://jsfiddle.net/e174f7t3/3/

我只用了两个事件而不是一个。

Answer 2

问题是您正在动态创建按钮，而click方法没有注册该元素。

您只需在$(document).ready()中触发单击，它应该可以工作，因为dom现在已加载，并且jquery知道您的按钮。

它应该看起来像这样：

$(document).ready(function(){        
  $('#checkbtn1').trigger('click');
});

dom中确实有元素，不是吗？Here is a link to the jsBin: