Jquery Mobile 选择选项菜单[Phonegap Project]答案

【问题标题】：Jquery Mobile select Options menu[Phonegap Project]Jquery Mobile 选择选项菜单[Phonegap Project]
【发布时间】：2014-02-20 15:08:45
【问题描述】：

我从服务器获取有关产品名称、图片、价格、类别等的信息，但我将这些信息放在选择菜单中，并且我希望在更改选择菜单的选项时显示成功警报，这是我的代码：

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
    <script type="text/javascript" charset="utf-8" src="cordova.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<title></title>

</head>
 <body onLoad="Extra(); " >

            <div id="extra" >
            </div>          
    <script type="text/javascript" > 
        function Extra()
            {      

            var callData = JSON.stringify({"serviceName":"global_functions", "methodName":"getAcces","parameters":[]});
             $.post("http://www.test.com/webservice/?contentType=application/json", callData, function(data)
                     {
                $.each(data, function( index, value)
                    {                       
                    $("#extra").append('<div style="border:2px solid red" id="'+index+'"><h3>'+value["name"]+'</h3><img width="200px" src="http://www.test.com/'+value["image"]+'"><select class="comboextra" selected="selected" id="test'+index+'">');                        
                    $.each(value["items"],function(index1,value1)
                            { 
                        $("#test"+index).append('<option  prix="'+value1["prix"]+'"cat="'+value1["cat"]+'"  value= "'+value1["id"]+'" >"'+value1["name"]+'"</option>');

                            });
                    $("#extra").append('</select><label>Quantity</label><input type="number" name="q_extra1" value="0" id="q_extra1" class="quantiteextra" style="width:80px"></div><div class="alert alert-success icon-money"> valeur <span class="totalprix">0</span> </div>')
                    //alert("test");
                    }); 

                }); 

            }


         $(document).on("change", ".comboextra", function ()
                 {
              alert($(this).find(".comboextra option:selected").attr("prix"));               
              id = $(this).val(); 
              prix = $("option:selected", this).attr("prix")
              qte = $(".quantiteextra").val();
              acccat = $("option:selected", this).attr("cat");
              total = prix * qte;
              acccat = ($(this).find(".comboextra option:selected").attr("cat"));

             if (id != 0){$('#finaldata').find("[acccat="+acccat+"]").remove(); $("#finaldata").append('<input type="tex00t" acccat="'+acccat+'" id="acc'+id+'" name="acc['+id+']" value="'+qte+'">');} else {$('#finaldata').find("[acccat="+acccat+"]").remove();}
             $(this).find(".totalprix").html(total);

                 });

    </script>       

<body>       
</html>

//////////////////////////////////////已编辑再次////////////////////////////////////////////////////////////////

我现在可以显示警报，我想从选择菜单中选择产品并添加数量并计算价格这是我修改后的代码，它显示警报并且值 =0，它不计算也不显示即使我改变了数量和改变了产品，任何价值：

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<title></title>

</head>
<body onLoad="Extra(); " >

            <div id="extra" >
            </div>          

            <div id="finaldata"></div>

    <script type="text/javascript" > 
        function Extra()
            {      

            var callData = JSON.stringify({"serviceName":"global_functions", "methodName":"getAcces","parameters":[]});
             $.post("http://www.test.com/webservice/?contentType=application/json", callData, function(data)
                     {
                $.each(data, function( index, value)
                    {                       
                    $("#extra").append('<div style="border:2px solid red" id="'+index+'"><h3>'+value["name"]+'</h3><img width="200px" src="http://www.test.com/'+value["image"]+'"><select class="comboextra" selected="selected" id="test'+index+'">');                        
                    $.each(value["items"],function(index1,value1)
                            { 
                        $("#test"+index).append('<option  prix="'+value1["prix"]+'"cat="'+value1["cat"]+'"  value= "'+value1["id"]+'" >"'+value1["name"]+'"</option>');

                            });
                    $("#extra").append('</select><label>Quantity</label><input type="number" name="q_extra1" value="0" id="q_extra1" class="quantiteextra" style="width:80px"></div><div class="alert alert-success icon-money"> valeur <span class="totalprix">0</span> </div>')
                    //alert("test");
                    }); 

                }); 

            }


         $(document).on("change", ".comboextra", function ()
                 {
              alert($(this).find(".comboextra option:selected").attr("prix"));               
              id = $(this).val(); 
              prix = $("option:selected", this).attr("prix")
              qte = $(".quantiteextra").val();
              acccat = $("option:selected", this).attr("cat");
              total = prix * qte;
              acccat = ($(this).find(".comboextra option:selected").attr("cat"));

             if (id != 0){$('#finaldata').find("[acccat="+acccat+"]").remove(); $("#finaldata").append('<input type="tex00t" acccat="'+acccat+'" id="acc'+id+'" name="acc['+id+']" value="'+qte+'">');} else {$('#finaldata').find("[acccat="+acccat+"]").remove();}
             $(this).find(".totalprix").html(total);

                 });

    </script>       

<body>       
</html>

【问题讨论】：

我无法显示警报，谢谢
因为项目是动态添加的，所以应该委托change事件$(document).on("change", ".comboextra", function () { alert(); });
Binding dynamically added elements in jQuery mobile 的可能重复项
您能确认您使用的是 jQM 吗？
您想在加载选项完成时显示警报？或者选择一个选项时？

标签： jquery-mobile

【解决方案1】：

您应该在更新文档后绑定change 事件。打印选择后尝试添加绑定：

function Extra()
        {      
        var callData = JSON.stringify({"serviceName":"global_functions", "methodName":"getAcces","parameters":[]});
        $.post("http://www.test.com/webservice/?contentType=application/json", callData,
        function(data)
            {
                $.each(data, function( index, value)
                    {                       
                    $("#extra").append('<div style="border:2px solid red" id="'+index+'"><h3>'+value["name"]+'</h3><img width="200px" src="http://www.test.com/'+value["image"]+'"><select class="comboextra" selected="selected" id="test'+index+'">');                        
                    $.each(value["items"],function(index1,value1)
                        { 
                        $("#test"+index).append('<option  prix="'+value1["prix"]+'"cat="'+value1["cat"]+'"  value= "'+value1["id"]+'" >"'+value1["name"]+'"</option>');
                        });
                    $("#extra").append('</select><label>Quantity</label><input type="number" name="q_extra1" value="0" id="q_extra1" class="quantiteextra" style="width:80px"></div><div class="alert alert-success icon-money"> valeur <span class="totalprix">0</span> </div>')
                });  
                $(".comboextra").change(function()
                {
                    alert("success");               
                });
            });
        }

【讨论】：