Переключить изображение со стилем ввода, скрытым с помощью jQuery Mobile Flip Switch на той же странице

Question

Подробно: мне нужно переключить изображение, т. Е. Когда включен флип-переключатель, он показывает изображение и скрывает его, если значение отключено. Код находится в файле 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');
                        });

Размещение контрольных точек в коде показывает, что функция CLICK выполняется с событием триггера, даже не нажимая переключатель.

Answer 1

У вас есть пара проблем.

Во-первых, тэг IMG должен закрыться перед SELECT. Во-вторых, идентификатор, который вы присвоили изображению, - "greenimage", но вы пытаетесь переключить "yellowim". В-третьих, поскольку вы добавляете выбор динамически, вы должны использовать делегирование события, чтобы связать событие. Наконец, для выбора вы используете событие изменения, а не событие щелчка.

Если вы используете jQM 1.4.x, вы можете использовать ImproWithin() вместо триггера ("создать").

$("#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');
});

Вот ДЕМО