jQuery UI dialog onClick event

jquery, jquery-ui, jquery-ui-dialog

Solution

Firstly your document.ready handler isn't quite using the right syntax - you're currently placing a function declaration within a jQuery object.

Secondly if you're using jQuery you should use it to attach your events, rather than the outdated `onclick` attributes. The latter should be avoided where possible in preference of unobtrusive event handlers. In jQuery this would be done by using `on()`, and in native JS it would be `addEventListener()`.

Try this:

<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").on('click', function(e) {
    e.preventDefault();
    $('#testimonialOpen').dialog('open');
  });
});

Problem

i'm trying to open a dialog box with an onclick command, but i'm having no luck whatsoever. I've tried everything and I just can get it to work. Here the dialog jQuery: ``` <script type="text/javascript"> $(function runDialog(){ $('#testimonialOpen').dialog({ autoOpen:false }); }) </script> ``` There is a div id'd testimonialOpen so I know it's selecting the element, and the dialog box works when the autoOpen is removed, however, when I try and call the function like this: ``` <p class="topper">Top words<a onClick="runDialog()"><img id="readMore" style="display: inline; padding-left:40px;" src="../images/content/readMore.png"/></a></p> ``` It just does nothing. I tried to use the 'open' command in the jQuery but it still does nothing, any ideas?

Original source