Jquery ui 对话框正在打开多个对话框而不是一个

Question

我正在使用 Jquery UI 对话框来显示来自 asp.net mvc 视图列表的一些信息。

所以基本上你去列表，你点击一个图标，你会得到一些关于特定记录的弹出信息

如果页面中只有一个对话框，没有问题，对话框会正常打开，但如果我想有多个对话框，那么当我单击其中任何一个时，所有对话框都会打开。

你能帮我看看我做错了什么吗？

 <td>                    
                <a class="clicker" dialogid="@item.Event.EventId" href="#"> Catering Details </a>
                <div class="dialog @item.Event.EventId" title=""> 
                     <p>@{Html.RenderAction("ViewEvent", "Home", new { EventId = item.Event.EventId });}</p>
                     </div>


                  @if (item.Event.SpecialRequirements != null)
             {
                  <img class="clicker2" dialog2id="@item.Event.EventId" style="margin-left:3px;display:inline;margin-bottom:-3px;cursor: pointer;" title="Special Requirements" src="~/Images/email-alert-icon.png"  /> 
                     <div class="dialog @item.Event.EventId" title="Special Requirements"> 
                     <p>@item.Event.SpecialRequirements</p>
                     </div>
             }  

        </td>

<script>
    $m = jQuery.noConflict();
</script>
<script>

    $m(function ()
    {

        $m('.dialog').dialog({
          autoOpen: false,
          show: { effect: "blind", duration: 1000 },
          hide: { effect: "explode", duration: 1000 },
          width:'800px',
          buttons: {
              Close: function () {
                  $m(this).dialog("close");
              }
          }
        });

      $m(".clicker").on("click", function () {
          $m("." + $(this).attr('dialogid')).dialog("open");
      });     

      $m(".clicker2").on("click", function () {
          $m("." + $(this).attr('dialog2id')).dialog("open");
      });

  });

</script>

Answer 1

您使用了 $m('.dialog')。它将打开您指定的 class 名称的所有对话框。

您可以为每个对话框指定一个唯一的 ID，并将 $m('.dialog') 替换为 $('#dialogId');

Answer 2

使用您的 HTML 结构，我认为您可以避免在此处使用额外的 classes 或 ID（当然，如果您只是为此使用它们）。

考虑以下 HTML：

<td>                    
    <a class="clicker" href="#">Catering Details</a>
    <div class="dialog" title=""> 
        // Your info
    </div>

    @if (item.Event.SpecialRequirements != null)
    {
        <img class="clicker" src="~/Images/email-alert-icon.png"  /> 
        <div class="dialog" title="Special Requirements"> 
            // Your info
        </div>
    }  

</td>

在您的 JS 中，您可以只打开下一个对话框：

$(".clicker").on("click", function () {
    $(this).next('.dialog').dialog("open");
});

编辑：

如果您想使用 id，我想您可以更改第二个对话框的 class：

<td>                    
    <a class="clicker" dialogid="@item.Event.EventId" href="#">Catering Details</a>
    <div class="dialog @item.Event.EventId" title=""> 
        // Your info
    </div>

    @if (item.Event.SpecialRequirements != null)
    {
        <img class="clicker2" dialogid="@item.Event.EventId" src="lalala"  /> 
        <div class="dialog2 @item.Event.EventId" title="Special Requirements"> 
            // Your info
        </div>
    }  

</td>

而 JS 将是：

$m('.dialog, .dialog2').dialog({
    autoOpen: false,
    show: { effect: "blind", duration: 1000 },
    hide: { effect: "explode", duration: 1000 },
    width:'800px',
    buttons: {
        Close: function () {
            $m(this).dialog("close");
        }
    }
});

$m(".clicker").on("click", function () {
    $m(".dialog." + $(this).attr('dialogid')).dialog("open");
});     

$m(".clicker2").on("click", function () {
    $m(".dialog2." + $(this).attr('dialogid')).dialog("open");
});

希望对您有所帮助！

Jquery ui 对话框正在打开多个对话框而不是一个

Jquery ui dialog is opening multiple dialogs instead of one

javascript

jquery

jquery-ui