onClick 模态对话框答案

【问题标题】：onClick Modal DialogonClick 模态对话框
【发布时间】：2014-05-19 18:06:26
【问题描述】：

但是我有不同的要求，无法应用该帖子中提供的解决方案。

目前我正在使用 JQuery ~~within php~~ 来解析 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 但是我不确定如何根据我的需要进行修改。

你是怎么做到的？

【问题讨论】：

先用纯 jQuery 写比直接写到 php 中调试要容易得多……你的问题甚至与 php 无关，你应该去掉上下文来找到问题。跨度>
我更同意 blex，您能否向我们提供您正在使用哪个对话框的信息？
为了方便您和我们的眼睛，您可以重写echo "replace \" with '"。如果您在控制台 (F12) 中遇到任何 javascript 错误，请重新测试并告诉我们。
@AkhileshSharma 对不起，我不明白你所说的对话是什么意思？我希望显示的文本或我尝试显示的对话框？
从我开始这样做的那一刻起，只是为了证明你很容易错过一些小事......，$(xml).find(\"vendor-one\") 找到vendor-one 对象或#vendor-one 选择器？

标签： javascript php jquery html

【解决方案1】：

不用手动onclick inline 选项，你可以使用Javascript的方式来做。

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

或 JQuery 方式（结果相同）：

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

【讨论】：