Question

我正在使用Tinybox 2在弹出窗口中显示我的静态html页面。问题是我想在静态页面中使用jquery。

这是插件的链接：

http://sandbox.scriptiny.com/tinybox2/

致电：Tinybox：

<a href="#" onclick="TINY.box.show({url:'photos.php?id=<?php echo $result_set['id'];?> ',width:900,height:400})">Read More </a>

photos.php：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
    <head>
        <script type="text/javascript" src="http://code.jquery.com/jquery-1.7.2.min.js"></script>
        <script type="text/javascript">
$(document).ready(function(){         //this won't work why? 
  $("#cmdstxt").click(function(){
    $("#cmdz").append(" cmds txt");
  });
});


</script>

        <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>

        <title>HTML</title>
    <style>
body   {
position: absolute;
top: 0;
left: 0;
bottom: 0;
right: 10px;
width:900px;
margin:0 auto;

}


html {
overflow-y: auto;
background-color: transparent;
}


::-webkit-scrollbar {
width: 10px;
height: 10px;
}


::-webkit-scrollbar-button:start:decrement,
::-webkit-scrollbar-button:end:increment  {
height: 30px;
display: block;
background-color: transparent;
}



::-webkit-scrollbar-track-piece  {
background-color: #3b3b3b;
-webkit-border-radius: 6px;
}


::-webkit-scrollbar-thumb:vertical {
height: 50px;
background-color: #666;
border: 1px solid #eee;
-webkit-border-radius: 6px;
}

        div#photo{
            width:390px;
            height:290px;

            float:left;
            padding:5px;
            !background-color:#3B5998;
        }
        div#about{
            width:450px;
            height:150px;
            overflow: scroll;
            overflow-y: scroll;
            overflow-x: hidden;
        }
        div#cmds{
            width:400px;
            height:300px;
            float:right; 
            border-left: 2px solid black;
        }
        img{
            max-height:150px;
        }

        .clear{
            clear: both;
        }


        textarea{
            width:300px;
        }

    </style>

    </head>

    <body>
<?php 
require_once("includes/database.php");
if(isset($_GET['id'])){
    $id=$_GET['id'];
}

$query="SELECT *
FROM `photo`
WHERE `id` ='${id}' ";
$result=$db->query($query);
$result_set=$db->fetch($result);
?>      


        <div id="photo">
        <h1><?php echo $result_set['title']; ?></h1>    
        <img src="uploads/<?php echo basename($result_set['path']); ?>" />  

        <div id="about"><?php echo $result_set['about']; ?></div>
        </div>

        <div id="cmds">
            <div id="cmdz"> </div>
            <textarea name="about" id="cmdstxt"></textarea>
        </div>
        <p class="clear" />

    </body>
</html>

Answer 1

您需要在成功调用中编写jQuery脚本。示例：

$(document).ready(function(){
    // When you click on the element below, you will see "clicked".
    $('.element').click(function(){
        alert('clicked');
    });

    $.ajax({
        url: a_cross_domain_url,
        success: function(data){
            // data will return something like : <a class="element">Click me!</a>
            $('.element').click(function(){
                alert('no nono');
            });

            // Clicking on element will return "no nono".
            alert(data);
        }   
    });
});

<a class="element">Click me!</a>

事件不会再次绑定。有3种方法可以解决这个问题：

使用.live（）自动将事件绑定到加载了AJAX的元素（jQuery 1.3及更高版本）。
将您的事件显式绑定到新加载的AJAX元素。
第三种方式是使用事件传播。在jQuery博客上搜索。

Answer 2

使用IFrame解决了问题：这是我的代码：

<a href="#" onclick="TINY.box.show({iframe:'photos.php?id=<?php echo $result_set['id'];?>',boxid:'frameless',width:900,height:450,fixed:false,maskid:'bluemask',maskopacity:40,closejs:function(){closeJS()}})" >Read More </a>

感谢。

如何在Tinybox中使用jquery？

2 个答案: