Question

我有一个按钮表单搜索，点击它会做一些ajax，我将该数据附加到一个对话框。我想让这些元素可选，并在选择时打开另一个钻取更多细节的对话框。我正在使用jquery任何帮助将不胜感激。

html

<div class="row">
 &nbsp; <button onclick="return Search_All_Forms()" type="button" class="btn btn-primary btn-sm">Search Forms</button>
</div>
<div id="dialog" title="Search Forms">

</div>

javascript

function Search_All_Forms() {
  //if (getCookieValue('PAYREG') != '99') {
  $.ajax({
    type: "GET",
    url: baseAzureServiceUrl + "/api/dynamicforms/FormHeader/search",
    //data: { add_userid: getCookieValue('USERID'), empl_id: getCookieValue('EMPLID'), location: getCookieValue('LOCATION'), status: 'STARTED' },
    data: {
      add_userid: 'UJCOCKR'
    },
    dataType: "json",
    success: function(data) {
      $.each(data, function(index, elements) {
        var strTitle = elements.form_title;
        var intFormDatatHeaderID = elements.form_data_header_id;
        // alert(intFormDatatHeaderID);
        var html = '';
        html += '<ul id="selectable">';
        html += '<li>' + strTitle + '</li>';
        html += '</ul>';
        $("#dialog").dialog({
          autoopen: false,
          modal: true,
          draggable: true,
          position: [200, 150],
          dialogClass: "foo",
          show: {
            effect: 'fade',
            duration: 1000
          }
        });
        $(".ui-corner-all").css("background-color", "white");
        //$("#dialog").append(strTitle + "<br>");
        $("#dialog").dialog("open")
        $('#dialog').append(html)
        $('#selectable').selectable();
        //alert(data); 
      })
    }
  })
}

Answer 1

我不确定您的确切问题但是当您将元素附加到文档时，您可以使用event delegation将事件处理程序附加到这些元素。像这样：

$(document)
     .on("click","#selectable li", function(e){
           $("#dialog").dialog.("open");
     });

自动打开的对话框选项拼写为autoOpen而不是autoopen。也：

 $("#dialog").dialog("open"); //<-- wrong order i thing
 $('#dialog').append(html);

应该是：

 $('#dialog').append(html);
 $("#dialog").dialog("open");

让我知道你是否更接近解决问题

Answer 2

在你的dialog（）调用之后，你可以使用这样的东西让新的.selectable元素在点击时产生一个自己的对话框：

$('.selectable').selectable({
    selected:function(e, ui){
        var eleText = $(ui.selected).text();
        var addText = "";
        switch(eleText){
            case "Test":
                addText = "Here's a brief description of the selected Test element.";
                break;
            case "E2":
                addText = "Here's some more information on the E2 element.";
                break;
        }
        $('<div>').text(addText).dialog();
    }
});

当然，您可以通过ajax将元素文本（或ID，如果您使用它们）传递给服务器，而不是使用switch语句，并使用响应中的信息作为新对话框中的描述 - 但是＆只有当你不希望信息开始时才能放在客户端的PC上时（例如，如果有大量的文字或图像会减慢初始调用页）。

我试图让我的对话框中的项目可选择，并在选择运行更多ajax

2 个答案: