open dialog on button click

Question

Want to open a dialog on onclick() event on button

file.html

<div class="new"></div>
<div id="dialog" title="Basic dialog">
    <p>This is an animated dialog which is useful for displaying information. The dialog window can be moved, resized and closed with the 'x' icon.</p>
</div>
<script>
    $(function() {
        $(".new").append('<div class="butn"><input type= "button"class ="btn btn-info " onclick="dialogopen()" value= "Reply"><>');
    });
    $("#dialog").dialog({
        autoOpen: false,
        show: {
            effect: "blind",
            duration: 1000
        },
        hide: {
            effect: "explode",
            duration: 1000
        }
    });

    function dialogopen() {
        alert("hello new");
        $("#dialog").dialog("open");

    }
</script>

What wrong i am doing i dont know. Please help me out for this.

Answer 1

You have additional ) while closing dialogopen function, You need to remove it

function dialogopen() {
  alert("hello new");
  $("#dialog").dialog("open");
//});
}; //Removed ) in this line

Also you should use Event Delegation using .on() delegated-events approach for dynamic elements instead of inline event handlers.

ie

$(document).on('event','selector',callback_function)

Example

$(document).on('click', ".btn-info", function(){
    $("#dialog").dialog("open");
});

DEMO

Answer 2

you have an extra ) at the end

    function dialogopen() {
      alert("hello new");
      $( "#dialog" ).dialog( "open" );
    }

Answer 3

try this.

$(".new")
  .append('<div class="butn"><input type= "button"class ="btn btn-info " value= "Reply"><>')
  .bind('click', function() {
      dialogopen();
})

and

function dialogopen() {
    alert("hello new");
    $( "#dialog" ).dialog( "open" );

};