How do i open a dialog on click using jquery

Question

I am trying to open a dialog on click on a item which is dragged and dropped. Each item which is been dropped has its own class and based on the class it should open a different dialog.

I have created the dialogs only for Audi and BMW only. So if one pulls Audi or BMW from the left to the right and click Audi or BMW it should open up a dialog. Any help is appreciated.

Here is the 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

I have updated the jsfiddle provided by you. there was an issue you were trying to bind the events on dynamic doms ( the classed are being generated on drop) so i updated the same and if you need can modify accordingly as of now it is working fine and showing alert if you are droping AUDI or BMW. i changed the below code:-

 $(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/