点击模态对话框 - onClick Modal Dialog

onClick Modal Dialog

本文关键字：对话框模态 | 更新日期: 2023-09-27

类似于:jquery模态对话框onclick?

但是我有一个不同的要求，不能应用在那篇文章中提供的解决方案。

目前我正在使用JQuery ~~内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项目，并有一个包含图像和文本的消息框出现。我打算使用这个:模态对话框，但我不确定如何根据我的需要修复它。

你是怎么做到的?

不使用手动onclick内联选项，您可以使用Javascript的方式来完成。

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

或者JQuery的方式(结果是一样的):

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