Javascript 在引导模型弹出窗口中旋转文本

我正在使用此代码在模型中旋转文本，但此代码在模型弹出窗口中不起作用

  var rotation = 0;

        jQuery.fn.rotate = function (degrees) {
            $(this).css({
                '-webkit-transform': 'rotate(' + degrees + 'deg)',
                '-moz-transform': 'rotate(' + degrees + 'deg)',
                '-ms-transform': 'rotate(' + degrees + 'deg)',
                'transform': 'rotate(' + degrees + 'deg)'
            });
        };

        $('#btnRotateRight').click(function () {
            rotation += 5;
            $('.rotate').rotate(rotation);
        });

        $('#btnRotateLeft').click(function () {
            rotation -= 5;
            $('.rotate').rotate(rotation);
        });

然后下面的代码就是模型弹出窗口

 $("#ViewDetail").append('<div class="modal-content"><div class="modal-header"><button id="btnRotateLeft" type="button">Rotate Left</button> <button id="btnRotateRight" type="button">Rotate Right</button><button type="button" class="close" data-dismiss="modal">&times;</button><h4 class="modal-title">Preview Cake</h4> </div> <div class="modal-body" style="text-align:center;"><div style="background-image:url(' + data.PrevRoundImg + ');max-width:320px;height:320px;background-repeat: no-repeat;padding-top:40%;" ><div class="rotate"><b id="msgtext" style="font-family:cursive;color:black; text-shadow: 0 0 3px White;font-size:20px;" >' + ckemsg + '</b></div></div></div><div class="modal-footer"><button type="button" class="btn btn-default" data-dismiss="modal">Close</button></div></div>');

$（“#视图详细信息”）.append（'Rotate Left Rotate Right×；Preview Cake'+ckemsg+'Close'）；

您的脚本无法运行，因为您正在注册事件$（“#btnRotateRight”）。请单击（和$（“#btnRotateLeft”）。在动态内容上单击（，因此在这种情况下，您需要在呈现页面中的元素后注册事件，或者在事件上使用Jquery，如下所示：

    $(document).on("click", "#btnRotateRight", function () {
        rotation += 5;
        $('.rotate').rotate(rotation);
    });

    $(document).on("click", "#btnRotateLeft", function () {
        rotation -= 5;
        $('.rotate').rotate(rotation);
    });

    $("#btnCheck").click(function () {
        $("#ViewDetail").append('<div class="modal-content"><div class="modal-header"><button id="btnRotateLeft" type="button">Rotate Left</button> <button id="btnRotateRight" type="button">Rotate Right</button><button type="button" class="close" data-dismiss="modal">&times;</button><h4 class="modal-title">Preview Cake</h4> </div> <div class="modal-body" style="text-align:center;"><div style="background-image:url(' + data.PrevRoundImg + ');max-width:320px;height:320px;background-repeat: no-repeat;padding-top:40%;" ><div class="rotate"><b id="msgtext" style="font-family:cursive;color:black; text-shadow: 0 0 3px White;font-size:20px;" >' + ckemsg + '</b></div></div></div><div class="modal-footer"><button type="button" class="btn btn-default" data-dismiss="modal">Close</button></div></div>');
        RegisterEvents();
    });
    var rotation = 0;
    function RegisterEvents() {
        jQuery.fn.rotate = function (degrees) {
            $(this).css({
                '-webkit-transform': 'rotate(' + degrees + 'deg)',
                '-moz-transform': 'rotate(' + degrees + 'deg)',
                '-ms-transform': 'rotate(' + degrees + 'deg)',
                'transform': 'rotate(' + degrees + 'deg)'
            });
        };
        $('#btnRotateRight').click(function () {
            rotation += 5;
            $('.rotate').rotate(rotation);
        });
        $('#btnRotateLeft').click(function () {
            rotation -= 5;
            $('.rotate').rotate(rotation);
        });
    }

或在呈现页面中的元素后注册事件，如下所示：

    $(document).on("click", "#btnRotateRight", function () {
        rotation += 5;
        $('.rotate').rotate(rotation);
    });

    $(document).on("click", "#btnRotateLeft", function () {
        rotation -= 5;
        $('.rotate').rotate(rotation);
    });

    $("#btnCheck").click(function () {
        $("#ViewDetail").append('<div class="modal-content"><div class="modal-header"><button id="btnRotateLeft" type="button">Rotate Left</button> <button id="btnRotateRight" type="button">Rotate Right</button><button type="button" class="close" data-dismiss="modal">&times;</button><h4 class="modal-title">Preview Cake</h4> </div> <div class="modal-body" style="text-align:center;"><div style="background-image:url(' + data.PrevRoundImg + ');max-width:320px;height:320px;background-repeat: no-repeat;padding-top:40%;" ><div class="rotate"><b id="msgtext" style="font-family:cursive;color:black; text-shadow: 0 0 3px White;font-size:20px;" >' + ckemsg + '</b></div></div></div><div class="modal-footer"><button type="button" class="btn btn-default" data-dismiss="modal">Close</button></div></div>');
        RegisterEvents();
    });
    var rotation = 0;
    function RegisterEvents() {
        jQuery.fn.rotate = function (degrees) {
            $(this).css({
                '-webkit-transform': 'rotate(' + degrees + 'deg)',
                '-moz-transform': 'rotate(' + degrees + 'deg)',
                '-ms-transform': 'rotate(' + degrees + 'deg)',
                'transform': 'rotate(' + degrees + 'deg)'
            });
        };
        $('#btnRotateRight').click(function () {
            rotation += 5;
            $('.rotate').rotate(rotation);
        });
        $('#btnRotateLeft').click(function () {
            rotation -= 5;
            $('.rotate').rotate(rotation);
        });
    }

$（“#btnCheck”）。单击（函数（）{
$（“#ViewDetail”）.append（'Rotate Left Rotate Right×；Preview Cake'+ckemsg+'Close'）；
RegisterEvents（）；
});
var旋转=0；
函数RegisterEvents（）{
jQuery.fn.rotate=函数（度）{
$（this.css）({
“-webkit变换”：“旋转（“+度+”度）”，
“-moz变换”：“旋转（“+度+”度）”，
“-ms变换”：“旋转（“+度+”度）”，
“变换”：“旋转（“+度+”度）”
});
};
$（'#btnRotateRight'）。单击（函数（）{
旋转+=5；
$（'.rotate'）。旋转（rotate）；
});
$（'btnRotateLeft'）。单击（函数（）{
旋转-=5；
$（'.rotate'）。旋转（rotate）；
});
}