javascript - How to load external content and apply css via js hover? -
i loading wikipedia on modal, once loaded want change background color of element mouse hover. code below apply hover function doesn't work.
click button wikipedia, click on result,, once page loaded hover element , background should change per code below - jsfiddle playground
$("#wiki").one('click', function(e) { var articlename = $(this).data('subject'); $.getjson("https://it.wikipedia.org/w/api.php?callback=?", { srsearch: articlename, action: "query", list: "search", format: "json" }, function(data) { $("#results ul").empty(); $("#results ul").append("<h3>results <b>" + articlename + "</b></h3>").text(); $.each(data.query.search, function(i, item) { $("#results").append("<div class='list-group'><a class='list-group-item' href='https://it.wikipedia.org/wiki/" + encodeuricomponent(item.title.replace(" ", "_")) + "' data-toggle='modal' data-target='.bs-example-modal-lg'><h4>" + item.title.replace(" ", "_") + "</h4><p class='list-group-item-text'>" + item.snippet + "</p></a></div>"); $("#results div a").attr("href", "#"); }); $('.modal').on('show.bs.modal', function (e) { $.getjson("https://it.wikipedia.org/w/api.php?action=parse&format=json&callback=?", { page: $(e.relatedtarget).find('h4').text(), prop:"text" }, function(data) { var markup = data.parse.text["*"]; var blurb = $('<div></div>').html(markup); blurb.find('a').each(function() { $(this).replacewith($(this).html()); }); blurb.find(".mw-editsection, #toc, .noprint, .thumb, img").remove(); $(".modal-header .modal-title").html(articlename); $(".modal-header .modal-title").promise().done(function(){ $(".modal-title").css({opacity: 0.0, visibility: "visible"}).animate({opacity: 1.0}); }); $(".modal-body").html($(blurb)); $(".modal-body").promise().done(function(){ $(".modal-content").html(data.parse.text['*']); savewiki(); }); }); }); }); }); function savewiki() { $('.modal-body').find().children().on("mouseover", function() { $("this").css("background-color", "yellow"); }); };
the solution change function @ bottom of code:
function savewiki() { $(".modal-content *").on("mouseenter", function() { $(this).css("background-color", "yellow"); }).mouseout(function(){ $(this).css("background-color", "white"); }); };
Comments
Post a Comment