Question

我尝试将图片和按钮（带点击事件）动态添加到现有div中。代码正在IE上运行。但不适用于chrome和firefox。 Demo on JS。当我从chrome和firefox打开时，图像和按钮应显示在页面上但不显示任何内容。我的示例代码有什么问题？

以下是示例代码。

＆＃13;

var _gimgangle = 0;
var $gnavControlContainer = $('#controlAddIn');
var $divImageContainer = $('<div></div>');
$divImageContainer.attr('id', 'gnavControlImageDivId');

var $img = $('<image></image>');
$img.attr('id', 'gnavControlImageId');

$img.attr("src",'http://i.kinja-img.com/gawker-media/image/upload/s--pEKSmwzm--/c_scale,fl_progressive,q_80,w_800/1414228815325188681.jpg').load(function () {            
	var $imgbtn = $('<button>Rotate</button>');
    $imgbtn.attr('id', 'imgbtnRotate');
    $imgbtn.attr('type', 'button');            
    $imgbtn.on('click', function () {
        //later rotate
        /*        
        _gimgangle += 90;
        $img.rotate(_gimgangle);
        _gimgangle = (_gimgangle === 360) ? 0 : _gimgangle;                
        */
        alert('Clicked...!'); //Chrome,FireFox not working, IE working
    });
    
	var $divbuttonContainer = $('<div></div>');
    $divbuttonContainer.append($imgbtn);
    $gnavControlContainer.append($divbuttonContainer);
});

$divImageContainer.append($img);
$gnavControlContainer.append($divImageContainer);

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id='controlAddIn'>Here is google image</div>

＆＃13;

Answer 1

图片无效的html标记。

＆＃13;

var _gimgangle = 0;
var $gnavControlContainer = $('#controlAddIn');
var $divImageContainer = $('<div></div>');
$divImageContainer.attr('id', 'gnavControlImageDivId');

var $img = $('<img></img>');
$img.attr('id', 'gnavControlImageId');

$img.attr("src",'http://i.kinja-img.com/gawker-media/image/upload/s--pEKSmwzm--/c_scale,fl_progressive,q_80,w_800/1414228815325188681.jpg').load(function () {            
	var $imgbtn = $('<button>Rotate</button>');
    $imgbtn.attr('id', 'imgbtnRotate');
    $imgbtn.attr('type', 'button');            
    $imgbtn.on('click', function () {
        //later rotate
        /*        
        _gimgangle += 90;
        $img.rotate(_gimgangle);
        _gimgangle = (_gimgangle === 360) ? 0 : _gimgangle;                
        */
        alert('Clicked...!'); //Chrome,FireFox not working, IE working
    });
    
	var $divbuttonContainer = $('<div></div>');
    $divbuttonContainer.append($imgbtn);
    $gnavControlContainer.append($divbuttonContainer);
});

$divImageContainer.append($img);
$gnavControlContainer.append($divImageContainer);

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id='controlAddIn'>Here is google image</div>

＆＃13;

JQuery动态添加不适用于Chrome和FireFox

1 个答案: