Javascript 如何在Tinybox中使用jquery？_Javascript_Jquery

Javascript 如何在Tinybox中使用jquery？

javascript jquery

Javascript 如何在Tinybox中使用jquery？,javascript,jquery,Javascript,Jquery,我使用Tinybox 2在弹出窗口中显示我的静态html页面。问题是我想在静态页面中使用jquery 以下是插件的链接：调用：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 ht

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

以下是插件的链接：

调用：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>


$（document）.ready（function（）{//这不起作用为什么？
$（“#cmdstxt”）。单击（函数（）{
$（“#cmdz”）.append（“cmds txt”）；
});
});
HTML
身体{
位置：绝对位置；
排名：0；
左：0；
底部：0；
右：10px；
宽度：900px；
保证金：0自动；
}
html{
溢出y：自动；
背景色：透明；
}
：-webkit滚动条{
宽度：10px；
高度：10px；
}
：-webkit滚动条按钮：开始：递减，
：-webkit滚动条按钮：结束：增量{
高度：30px；
显示：块；
背景色：透明；
}
：-webkit滚动条轨迹条{
背景色：#3b3b；
-webkit边界半径：6px；
}
：-webkit滚动条拇指：垂直{
高度：50px；
背景色：#666；
边框：1px实心#eee；
-webkit边界半径：6px；
}
部门照片{
宽度：390px；
高度：290px；
浮动：左；
填充物：5px；
！背景色：#3B5998；
}
关于{
宽度：450px；
高度：150像素；
溢出：滚动；
溢出y：滚动；
溢出x：隐藏；
}
分区cmds{
宽度：400px；
高度：300px；
浮动：对；
左边框：2倍纯黑；
}
img{
最大高度：150像素；
}
.清楚{
明确：两者皆有；
}
文本区{
宽度：300px；
}
" />

您需要在成功调用中编写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>

$（文档）.ready（函数（）{
//单击下面的元素时，您将看到“单击”。
$（'.element'）。单击（函数（）{
警报（“点击”）；
});
$.ajax({
url：一个跨域url，
成功：功能（数据）{
//数据将返回如下内容：单击我！
$（'.element'）。单击（函数（）{
警惕（“无不可”）；
});
//单击元素将返回“no nono”。
警报（数据）；
}   
});
});
点击我！

事件将不再绑定。有3种方法可以解决此问题：

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

<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>

.live（）

$（document）.ready（function（）{$（“#cmdstxt”）.on（'click'，function（）{$（“#cmdz”）.append（“cmds txt”）；；