Using JQuery, how can we use one function to use for click event of multiple buttons to display a dialog box

Question

In my ASP.NET MVC 4 app, I have a view with some embedded partial views each of which have a help button with IDs HelpButtonID_1, HelpButtonID_2,.... Moreover, each view has a div tag with text related to that partial view. The IDs of these div tags are divID_1, divID_2,...In my _Layout.cshtml view used by all the views, I have defined the jquery dialog box as follows so that when user clicks on the help button of a particular partial view, say View1 the dialog box would open with the text from the divID_1, and if the help button of partial View2 is clicked, the dialog box would open with the text from divID_2, etc.

<script>
  $(function () {
     $('[id^="divID_"]').dialog({
     width: 400,
     autoOpen: false
    });
    $('[id^="HelpButtonID_"]').click(function () {
      $('[id^="divID_"]').dialog("open");
      return false;
    });
 });
</script>

But the above is not working. On the other hand the the following works if I have a help button with ID, say, HelpButtonID and a div tag with ID, say, divID, on just one partial view.

<script>
  $(function () {
      $("#divID").dialog({
         width: 400,
         autoOpen: false
    });
    $('#HelpButtonID').click(function () {
       $("#divID").dialog("open");
       return false;
    });
  });
</script>

Please help. Thanks.

Answer 1

I would use a common class for the buttons and dialogs, and a data- attribute to specify the dialog div:

<button class="help-button" data-dialog-id="#HelpDialog6">?</button>

---

<div id="HelpDialog6" class="help-dialog">Some content</div>

---

$(function () {
      $(".help-dialog").dialog({
         width: 400,
         autoOpen: false
    });
    $('.help-button').click(function () {
       $($(this).data('dialog-id')).dialog("open");
       return false;
    });
  });