w3hello.com logo
Home PHP C# C++ Android Java Javascript Python IOS SQL HTML videos Categories
Event listener is lost after showing again the node

I think your problem is that you are changing the html so you are updating the dom with a new version of s each time so there won't be any events bound to this new version of s. If you just attach the s to the dom once, you can fade in and out without the need to re-attach the event and it will also be a bit better performance wise:

var data = ["Some text", "Another thing", "Select me ;]"];

var s = $("<select/>");
var text = $("#text");
s.hide();
for (var val in data) {
    $("<option />", {
        value: val,
        text: data[val]
    }).appendTo(s);
}

s.insertAfter(text);

s.on('click', function (e) {
    s.fadeOut("fast", function () {
        var selected = s.find(":selected").first().text();
        text.html(selected).fadeIn("fast");
        $('#show_select').parent().fadeIn("fast");
    });
});

$('#show_select').on('click', function () {
    $(this).parent().fadeOut("fast", function () {
        s.fadeIn("fast");
    });
});

Example





© Copyright 2018 w3hello.com Publishing Limited. All rights reserved.