не удается открыть jQuery ui диалог второй раз

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> «s уникальные идентификаторы, в данном случае я использовал„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 мы хотим показать, и вызвать 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(); 

})

Я нашел другое решение. Добавьте идентификационные параметры к вашим кнопкам.

Использование $ (this) с .dialog() удаляет элементы из DOM.