Диалог jQuery UI onClick event

Question

Я пытаюсь открыть диалоговое окно с командой onclick, но мне не повезло. Я пробовал все, и я просто могу заставить его работать.

Здесь диалог JQuery:

<script type="text/javascript"> 
     $(function runDialog(){ 
      $('#testimonialOpen').dialog({ 
       autoOpen:false 
       }); 
      }) 
    </script> 

Существует ДИВ опознал testimonialOpen, так что я знаю, что выбрать элемент, и диалоговое окно работает, когда AutoOpen удаляется, однако, когда я пытаюсь и вызов функция, подобная этой:

<p class="topper">Top words<a onClick="runDialog()"><img id="readMore" style="display: inline; padding-left:40px;" src="../images/content/readMore.png"/></a></p> 

Это просто ничего не делает. Я попытался использовать команду «open» в jQuery, но он все еще ничего не делает, никаких идей?

Answer 1

Прежде всего, ваш готовый обработчик имеет синтаксическую ошибку. Во-вторых, если вы используете jQuery, вы должны использовать его для прикрепления ваших событий, а не к неуклюжим и устаревшим атрибутам onclick.

Попробуйте это:

<p class="topper"> 
    Top words 
    <a href="#"> 
     <img id="readMore" style="display: inline; padding-left:40px;" src="../images/content/readMore.png"/> 
    </a> 
</p> 

$(function() { 
    $('#testimonialOpen').dialog({ 
     autoOpen:false 
    }); 

    $(".topper a").click(function(e) { 
     e.preventDefault(); 
     $('#testimonialOpen').dialog('open'); 
    }); 
}); 

Answer 2

Попробуйте этот код

$(function() { 
 
    $("#ok_link").click(function(e) { 
 
     e.preventDefault(); 
 
     $('#dialog-confirm').dialog('open'); 
 
    }); 
 

 
    $("#dialog-confirm").dialog({ 
 
     resizable: false, 
 
     height:160, 
 
     modal: true, 
 
     minWidth: 400, 
 
     autoOpen:false, 
 
     buttons: { 
 
     "OK": function() { 
 
      location.href="index.html"; 
 
     }, 
 
     Cancel: function() { 
 
      $(this).dialog("close"); 
 
     } 
 
     } 
 
    }); 
 
    });

body { 
 
\t font-family: "Trebuchet MS", "Helvetica", "Arial", "Verdana", "sans-serif"; 
 
\t font-size: 62.5%; 
 
}

<link href="http://code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css" rel="stylesheet"/> 
 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"> 
 
</script> 
 
<script src="http://code.jquery.com/ui/1.11.4/jquery-ui.js"></script> 
 

 
<a href="index.html" id="ok_link">OK</a> 
 

 
<div id="dialog-confirm" title="Are you sure to go home?"> 
 
    <p><span class="ui-icon ui-icon-alert" style="float:left; margin:0 7px 20px 0;"></span>You are about to redirect to home page. Are you sure?</p> 
 
</div>