Html button click event not triggering for radio button

Question

I have one radiobutton list. When I'm clicking the radio button then respective contents are displaying and those are slider contents. I'm using jquery.bxslider.js for this purpose. It is working fine in 2 cases:-

1- when I'm clicking the radiobutton. 2- When I create a separate button call the function in onclick event. And then call that button. This is defined below.

<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>

But my requirement is to automatically trigger the button event or any how to click the radiobutton so that the respective slider to display. I've written the below code for this purpose, but it is only selecting the radio button but no event triggering.

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

Can anybody pls help ?

Answer 1

The problem is you are creating the button on the fly and the click method does not register the element.

You could just trigger the click in a $(document).ready() and it should work because the dom is now loaded and jquery knows about your button.

It shoul look something like this:

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

You do have the element in the dom don't you? Here is a link to the jsBin:

Answer 2

I tried something like this and it works :

$(document).ready(function(){

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

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

Check this fiddle : https://jsfiddle.net/e174f7t3/3/

I just used two events instead of one.