.click()有时是有效的,有时则不然

时间:2015-08-10 09:56:48

标签: javascript jquery html iframe click

我遇到的问题是我正在尝试将div上的点击功能应用于iframe中的元素,它有时会起作用,但有时候它不起作用而且它非常随机。这是我应用click方法的代码:

<script type="text/javascript">
    var yammerFrame = parent.parent.document.getElementsByTagName("frame")[1].contentDocument.getElementsByTagName("frame")[0].contentDocument.getElementsByTagName("iframe")[0];

    $(yammerFrame).load(function() { 
        var yammerMessages = parent.parent.document.getElementsByTagName("frame")[1].contentDocument.getElementsByTagName("frame")[0].contentDocument.getElementsByTagName("iframe")[0].contentWindow.document.getElementById('yammerMessages');

        $(document).ready(function() { 
            $(yammerMessages).click(function() { 
            $('#myModal').modal('show');
        });
    });
});
</script>
<div id="myModal" class="modal fade" role="dialog">
    <div class="modal-dialog">
        <!-- Modal content-->
        <div class="modal-content">
            <div class="modal-header" style="text-align: center">
                <button type="button" class="close" data-dismiss="modal">&times;</button> 
                <span>
                    <a href="https://www.yammer.com/abcam.com/#/threads/company?type=general"><img src="https://upload.wikimedia.org/wikipedia/commons/1/1f/Yammer_logo.png" alt="Yammer" style="width: 200px;height: 50px;"></a>
                </span>
            </div>
            <div class="modal-body" style="text-align: center">
                <h4 id="modal-body-sender" style="font-weight:bold"></h4>
                <h4 id="modal-body-date"></h4>
                <div id="modal-body-well" class="well">
                     <h4 id="modal-body-message" style="color:black;word-wrap: break-word;"></h4>
                </div>
            </div>
            <div class="modal-footer">
                <div class="btn-group" role="group" aria-label="...">
                    <button type="button" class="btn btn-primary" onclick="open_win()">Go To Post</button>
                    <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
                </div>
            </div>
        </div>
    </div>
</div>
<!DOCTYPE html>
<html lang="en"> 
<head>
    <meta charset="utf-8" />
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" type="text/css" />
    <link rel="stylesheet" href="css/Site.css" type="text/css" />
</head>

<body> 
    <span id="yammer-login"></span>
    <div id="yammerDiv">
        <div id="yammerHeader"> 
            <a href="https://www.yammer.com/abcam.com/#/threads/company?type=general"><img src="https://upload.wikimedia.org/wikipedia/commons/1/1f/Yammer_logo.png" alt="Yammer" height="17px;" width="50%"></a>
        </div>
        <div id="yammerMessages" style="margin-top: 25px;">
            <img id="loading-gif" src="http://i559.photobucket.com/albums/ss36/madszckey01/speakker/buffering.gif">
            <div id="text-wrapper" style="width: 100%; height: 76%;"> 
                <span id="message"></span>
            </div> 
            <span id="sender"></span>
        </div>
        <div id="yammerButtons" style="display:none">
            <button id="previous" type="button" class="btn btn-default btn-xs" aria-label="Left Align" onclick="onPrevious()" dataenter code here-toggle='tooltip' data-placement='top' data-original-title="Previous"> 
                <span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>
            </button>
            <input type="checkbox" id="myCheck" onclick="autoscroll()" data-toggle='tooltip' data-placement='top' data-original-title="Auto-Scroll" class='checkbox'>
            <button id="next" type="button" class="btn btn-default btn-xs" aria-label="Right Align" onclick="onNext()" data-toggle='tooltip' data-placement='top' data-original-title="Next"> 
                <span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
            </button>
        </div>
    </div>

1 个答案:

答案 0 :(得分:0)

直播尝试此功能。

$(yammerMessages).live('click', function() { 
        $('#myModal').modal('show');

   });