Jquery mouseover 附加 iframe（相同域）元素答案

【问题标题】：Jquery mouseover appended iframe (same domain) elementJquery mouseover 附加 iframe（相同域）元素
【发布时间】：2014-12-09 20:12:42
【问题描述】：

这是fiddle example 我喜欢做的事情。我想将鼠标悬停在 iframe （相同域）内的元素上，然后更改字体的颜色。就像例子一样。

但在我的版本中，iframe 是在我按下按钮后创建的 - my fiddle example。在我的示例中，鼠标悬停不起作用，我不知道为什么。我对javascript没有那么丰富的经验，也无法自己弄清楚。也许我想做的事情无法完成，或者我只是错过了一些东西。

function load_iframe(callback) {
    $('#iframe').append('<iframe class="ajax" scrolling="no" style="height:190px" src="http://fiddle.jshell.net/38g2pyxh/"></iframe>')
    $('.ajax').load(function() {
        callback(this);
    });
}

$(document).on('click','#create',function(callback){
    load_iframe(function(){
    iframe = $('iframe.ajax').contents()
    iframe.find('body').prepend('<b>This is a test</b><br><b>Click here</b>');
    })
    return iframe
})

iframe.on('mouseover', 'b', function() {
    $(this).css('color','red');
});

到目前为止我做了什么 Fiddle

【问题讨论】：

标签： jquery html iframe javascript-events

【解决方案1】：

这是简单的代码，希望对您有所帮助....我正在编辑您的代码

var iframe
var a
function load_iframe(callback) {

        $('#iframe').append('<iframe id="1a" class="ajax" scrolling="no" style="height:190px" src="http://fiddle.jshell.net/38g2pyxh/"></iframe>')
        $('.ajax').load(function() {
            callback(this);
        });
    }

    $(document).on('click','#create',function(callback){

                load_iframe(function(){
                    iframe = $('iframe.ajax').contents()
                    iframe.find('body').prepend('<b id="bb">This is a test</b><br><b>Click here</b>');
                      a=document.getElementById('1a').contentWindow.document.getElementById('bb')
    alert('pass')
     a.onmouseover=function(){
     a.style.color="red"
    }
       a.onmouseleave=function(){
     a.style.color="black"
    }
                })

            return iframe
    })

【讨论】：