的onClick模態對話框

Question

類似：jquery modal dialog onclick?

但是我有不同的要求，不能應用在該職位所提供的解決方案。

在我使用PHP內的JQuery 通過XML文件來分析和HTML網頁製作內容的時刻：

<script type="text/javascript"> 
     $(document).ready(function(){ 
      $.ajax({ 
       type: "GET", 
       url: "uploads/data.xml", 
       dataType: "xml", 
       error: function() { 
        $('#message').text('Please upload the XML file.'); 
       }, 
       success: xmlParser 
      }); 
     }); 

     function xmlParser(xml){ 
      $('.tmpli').hide(); 


      $(xml).find("vendor-one").each(function(){ 
       $("#vendor-one").append('<li class="sweet">' + $(this).find("name").text() + '</li>'); 
       $(".sweet").fadeIn(); 
      }); 

     } 
    </script> 

我試圖通過onClick觸發警報但是它不能夠包含圖像：

$(xml).find("vendor-one").each(function(){ 
    $("#vendor-one").append('<li class="sweet" onClick="alert(\''+$(this).find("name").text()+'\');">' + $(this).find("name").text() + '</li>'); 
    $(".sweet").fadeIn(); 
}); 

我然後試圖這樣但它打開了頁面上的每個li元素一個對話框，我不能確定如何編輯文本，並添加圖片：

$(xml).find("vendor-one").each(function(){ 
    $("#vendor-one").append('<li class="sweet">' + $(this).find("name").text() + '</li>'); 
    $(".sweet").fadeIn(); 
    $('li.sweet').click(function(){ $('li.sweet').dialog(); }); 
}); 

我需要的設施在那裏我可以點擊創建每一個人li項目，並有一個消息框出現包含圖像和文字。 我打算使用這個：Modal Dialog但是我不確定如何修補它以滿足我的需求。

你是如何做到這一點的？

Answer 1

除了使用手動onclick內嵌選項，您可以使用Javascript方式來完成它。

document.getElementById('ElementID').addEventListener('click', function(event){ 
    console.log(event); 
}); 

或者JQuery的方式（這會導致同樣的事情）：第一

$('#ElementID').click(function(event){ 
    console.log(event); 
});