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/

如何使用jquery打开单击对话框

1 个答案: