открытый диалог на кнопку мыши

Question

Хотите, чтобы открыть диалоговое окно на OnClick() событие на кнопку

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> 

Что плохого я делаю я не знаю. Пожалуйста, помогите мне за это.

Answer 1

У вас есть дополнительные ) при закрытии dialogopen функции, Вы должны удалить его

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

Также вы должны использовать Event Delegation с использованием .on() делегированных-событий подхода для динамических элементов, вместо встроенных обработчиков событий.

т.е.

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

Пример

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

DEMO

Answer 2

попробовать это.

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

и

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

}; 

Answer 3

у вас есть дополнительный) в конце

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