Question

我有两个jquery ui对话框，只打开一次。这是小提琴http://jsfiddle.net/santosh_patnala/2fMqp/2/

HTML：

<div>
<div class="case-study-share" style="width: 24%; float: left;"> <b>Test Case One </b>

    <br />
    <button class="Share">Share</button>
    <div id="test" class="testCase" title="Dialog Title" style="display: none">CaseStudy = Elgifto Url:http://localhost:51723/CaseStudies/Details/1</div>
</div>
<div class="case-study-share" style="width: 24%; float: left;"> <b>Test Case Two </b>

    <br />
    <button class="Share">Share</button>
    <div id="test" class="testCase" title="Dialog Title" style="display: none">CaseStudy = Test Case Url:http://localhost:51723/CaseStudies/Details/1</div>
</div>

jquery的：

$(".Share").click(function (e) {

$(this).next(".testCase").dialog();

}）

请帮我解决这个问题

Answer 1

这种情况正在发生，因为您在首次加载时初始化对话框，并且在第二次尝试时它们已经初始化，因此我们无法再次初始化它们。

我让它在这个小提琴中工作：http://jsfiddle.net/2fMqp/24/

基本上，给你的对话框<div>的唯一ID，在这个例子中我使用了“test1”和“test2”。将数据属性添加到共享按钮，以便他们知道他们控制的<div>，在此示例中为data-dialogId。

<div>
    <div class="case-study-share" style="width: 24%; float: left;"> <b>Test Case One </b>
    <br />
    <button class="Share" data-dialogId="test1">Share</button>
    <div id="test1" class="testCase" title="Dialog Title" style="display: none">CaseStudy = Test Case One Url:http://localhost:51723/CaseStudies/Details/1</div>
</div>

<div class="case-study-share" style="width: 24%; float: left;"> <b>Test Case Two </b>
    <br />
    <button class="Share" data-dialogId="test2">Share</button>
    <div id="test2" class="testCase" title="Dialog Title" style="display: none">CaseStudy = Test Case Two Url:http://localhost:51723/CaseStudies/Details/1</div>
</div>

接下来，我们在页面加载时初始化对话框，然后在调用按钮时，获取我们想要显示的div的ID，并调用dialog("open")而不是dialog()。

$( ".testCase" ).dialog({
    autoOpen: false,
});

$(".Share").click(function (e) {
    var dialogId = $(this).attr("data-dialogId");
    $("#" + dialogId).dialog("open");
});

Answer 2

<div>
<div class="case-study-share" style="width: 24%; float: left;"> <b>Test Case One </b>

    <br />
    <button class="Share" id="1">Share</button>
    <div id="test1" class="testCase" title="Dialog Title" style="display: none">CaseStudy = Test Case One Url:http://localhost:51723/CaseStudies/Details/1</div>
</div>
<div class="case-study-share" style="width: 24%; float: left;"> <b>Test Case Two </b>

    <br />
    <button class="Share" id="2">Share</button>
    <div id="test2" class="testCase" title="Dialog Title" style="display: none">CaseStudy = Test Case Two Url:http://localhost:51723/CaseStudies/Details/2</div>
</div>

$(".Share").click(function (e) {

$("#test"+$(this).attr('id')).dialog();

}）

我为您找到了不同的解决方案。将id参数添加到按钮中。

使用$（this）和.dialog（）从DOM中删除元素。

无法再次打开jquery ui对话框

2 个答案: