我如何打開一個對話框點擊使用jquery

Question

我想打開一個對話框上點擊一個項目是拖放。 每個被刪除的項目都有它自己的類，並根據類別打開不同的對話框。

我只爲奧迪和寶馬創建了對話框。因此，如果從左側向右側拉動奧迪或寶馬，然後點擊奧迪或寶馬，則應打開對話框。任何幫助表示讚賞。

這裏是的jsfiddle https://jsfiddle.net/prady/grjfo8n3/1/

https://jsfiddle.net/prady/grjfo8n3/1/#&togetherjs=jb0G1yTjd4

<div class="demo"> 
<div class="sideBySide"> 
    <div class="left"> 
    <ul class="source"> 
     <li>Alfa Romeo</li> 
     <li>Audi</li> 
     <li>BMW</li> 
     <li>Ford</li> 
     <li>Jaguar</li> 
     <li>Mercedes</li> 
     <li>Porsche</li> 
     <li>Tesla</li> 
     <li>Volkswagen</li> 
     <li>Volvo</li> 
    </ul> 
    </div> 
    <div class="right"> 
    <ol class="target"> 
     <li class="placeholder">Drop your favourites here</li> 
    </ol> 
    </div> 
</div> 
</div> 
<div class="Audi" title="Dialog Title" style="display:none"> Some text</div> 
<script> 
$(".source li").draggable({ 
    addClasses: false, 
    appendTo: "body", 
    helper: "clone" 
}); 

$(".target").droppable({ 
    addClasses: false, 
    activeClass: "listActive", 
    accept: ":not(.ui-sortable-helper)", 
    drop: function(event, ui) { 
    $(this).find(".placeholder").remove(); 
    var link = $("<a href='#' class='dismiss'>x</a>"); 
    var list = $("<li class='" + ui.draggable.text() + "'></li>").text(ui.draggable.text()); 

    $(list).append(link); 
    $(list).appendTo(this); 
    //updateValues(); 
    } 
}).sortable({ 
    items: "li:not(.placeholder)", 
    sort: function() { 
    $(this).removeClass("listActive"); 

    }, 
    update: function() { 
    // updateValues(); 
    } 
}).on("click", ".dismiss", function(event) { 
    event.preventDefault(); 
    $(this).parent().remove(); 
// updateValues(); 
}); 

    $(function() { 
    $(".source, .target").sortable({ 
     connectWith: ".connected" 
    }); 

    }); 
    $(".Alfa Romeo").click(function() { 
     alert('hi'); 
     $(".Alfa Romeo").dialog('open'); 
     return false; 
    }); 
    $(".Audi").click(function() { 
     alert('hi'); 
     $('#dialog').dialog('open'); 
     return false; 
    }); 

    function updateValues() { 
    var items = []; 
    $("ul.target").children().each(function() { 
     var item = {manufacturer: $(this).text()}; 
     items.push(item); 
    }); 
    var jsonData = JSON.stringify(items);      
    $.ajax ({ 
     url: "dnd.xsp/setfavourites", 
     type: "PUT", 
     data: jsonData, 
     dataType: "json", 
     contentType: "application/json; charset=utf-8", 
     success: function(){}, 
     error: function(){} 
    }); 
    }; 

</script> 

Answer 1

我已經更新您所提供的的jsfiddle。有一個問題，你試圖綁定動態doms上的事件（分類正在下降生成），所以我更新了相同的，如果你需要可以相應地修改截至目前它工作正常，並顯示警報，如果你下降奧迪或寶馬。 我改變了下面的代碼： -

$(document).on("click", ".BMW", function() { 
     alert('hi'); 
     $(".Alfa Romeo").dialog('open'); 
     return false; 
    }); 
    $(document).on("click", ".Audi", function() { 
     alert('hi'); 
     $('#dialog').dialog('open'); 
     return false; 
    }); 

的jsfiddle： - https://jsfiddle.net/grjfo8n3/6/