Javascript 在同一页面上使用jQuery Mobile Flip开关切换隐藏输入样式的图像

详情： 我需要切换一个图像，即当翻转开关打开时，它显示图像，当值关闭时隐藏图像。代码位于JS文件中

$("#dashboard").append('<form><img src="../images/GREEN.png" style="display: none;" id="greenimage">Toggle Image<select id="flip" name="flip-select" data-role="flipswitch">'+
                    '<option>Off</option>'+
                    '<option>On</option>'+
                    '</select>'+
                '</img></form>');

$("#dashboard").trigger("create");          

                $('#flip').click(function() 
                        {

                            $("#yellowim").toggle('slow');
                        });

$（“#仪表板”）.append（'Toggle Image'+
“关”+
“开”+
''+
'');
$（“#仪表板”）。触发器（“创建”）；
$（'#翻转'）。单击（函数（）
{
$（“#yellowim”）.toggle（'slow'）；
});

---

在代码中放置检查点表明，CLICK函数与触发器事件一起执行，甚至没有单击开关。

您有几个问题

首先，IMG标签应在选择之前关闭。 其次，您分配给图像的ID是“greenimage”，但您正在尝试切换“yellowim”。 第三，在动态添加select时，应该使用事件委派来绑定事件。 最后，在select上使用更改事件，而不是单击事件

如果您使用的是jqm1.4.x，那么可以使用enhanceWithin（）而不是trigger（“create”）

$（“#仪表板”）.append（'Toggle Image'+
“关”+
“开”+
'' +
''）.enhanceWithin（）；
$（“#仪表板”）。在（“更改”、“翻转”功能上（）{
$（“#绿色图像”）。切换（'slow'）；
});

这里有一个

$("#dashboard").append('<form><img src="http://lorempixel.com/32/32/nature/1/" style="display: none;" id="greenimage" />Toggle Image<select id="flip" name="flip-select" data-role="flipswitch">' +
    '<option>Off</option>' +
    '<option>On</option>' +
    '</select>' +
    '</form>').enhanceWithin();

$("#dashboard").on("change", '#flip', function () {
    $("#greenimage").toggle('slow');
});