Question

我只是在jquery-ui对话框上工作，我用小图像图标触发了它。因此，当我们单击它时，将出现对话框。我正在使用对话框来回答大约100个问题。

这似乎很好用，但是当我在代码中使用它时，对话框内容文本不带标题，而对话框仅带标题。我认为这是由于click事件被多次触发所致。

HTML代码：

<img class="A" src="pics/hello.png" id="title">
<span id="dialog_text" class="D" title="dialogBox">
   I am a dialog box
</span>

JS：

function dialogBox(open, dial){
  if(dial.length>0 && open.length>0){
    dial.dialog({ 
      autoOpen: false,
      width: 300,
      height: "auto",
      modal: true,
      buttons: {
        Close: function() {
          dial.dialog( "close" );
        }  
      }
    });

    open.click(function() {
      dial.dialog("open");
      return false;
    });    
  }

  dial.css("font-size", "18px");

}

$(document).ready(function() {
  var dialoge = $("#dialog_text");
  if (dialoge){     
    var head = $("#title");
    head.click(dialogBox(head, dialoge));

  }
});

在这里，当我单击图像时，我有两个对话框，一个不带标题和对话框文本，另一个不带标题和对话框文本。谢谢

Answer 1

尝试执行点击事件中的所有逻辑。更加简单的imo。

$("#dialog_text").click(function() {
  $(this).dialog({
    autoOpen: false,
    width: 300,
    height: "auto",
    modal: true,
    buttons: {
      close: function() {
        $(this).dialog( "close" );
      }  
    },
  }).css("font-size", "18px");
});

$('#title').click(function() {
  $('#dialog_text').dialog('open');
});

jQuery UI对话框正在加载多次

1 个答案: